js代码适用于一个变量(?），如何使其适用于多个变量

js code works for one variable(?), how to make it work for many?

本文关键字：变量 适用于 何使其 代码 js 一个      更新时间：2023-09-26

我有js的工作代码，它为所选选项显示不同的div。

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>    
<script type="text/javascript">
$(document).ready(function(){
$('#box1').hide();
$('#box2').hide();
$('#box3').hide();
$("#thechoices").change(function(){
$("#" + this.value).show().siblings().hide();
});    
$("#thechoices").change();
});
</script>
</head>
<body>
<select id="thechoices">
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIVs -->
<div id="boxes">
<div id="box1"><p>Box 1 stuff...</p></div>
<div id="box2"><p>Box 2 stuff...</p></div>
<div id="box3"><p>Box 3 stuff...</p></div>
</div>    
</body>
</html>

拜托，我没有js的经验，所以我不知道如何在一个页面上为多个"选项"工作几次。类似复制粘贴的东西，但比这个更合适：

    <script type="text/javascript">
$(document).ready(function(){
$('#box1').hide();
$('#box2').hide();
$('#box3').hide();
$('#box4').hide();
$('#box5').hide();
$('#box6').hide();
$("#thechoices").change(function(){
$("#" + this.value).show().siblings().hide();
});
$("#thechoices2").change(function(){
$("#" + this.value).show().siblings().hide();
});
$("#thechoices").change();
});
$("#thechoices2").change();
});
</script>
</head>
<body>
<select id="thechoices">
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIVs -->
<div id="boxes">
<div id="box1"><p>Box 1 stuff...</p></div>
<div id="box2"><p>Box 2 stuff...</p></div>
<div id="box3"><p>Box 3 stuff...</p></div>
</div>
<select id="thechoices2">
<option value="box4">1</option>
<option value="box5">2</option>
<option value="box6">3</option>
</select>
<!-- the DIVs -->
<div id="boxes">
<div id="box4"><p>1 stuff...</p></div>
<div id="box5"><p>2 stuff...</p></div>
<div id="box6"><p>3 stuff...</p></div>
</div>

我知道你可以帮我，这看起来很简单，但我无法应付。如何更改我的第二个代码，使其以相同的方式工作，但不只是针对两个选择器。很多人都需要它。不想像我的第二段代码那样复制粘贴相同的部分。

避免重复ID，并为每个选择菜单提供一种方法来寻址其相应的框。

在HTML:中

  • 将id="thechoices"更改为class="thechoices"
  • 始终将id="boxn"更改为class="boxn"
  • 在<div class="boxWrapper">...</div>中包装每个选择及其相应的框

现在使用以下jQuery:

$(document).ready(function(){
    $(".thechoices").change(function(){
        $this = $(this);
        $this.closest(".boxWrapper").find("." + $this.val()).show().siblings().hide();
    }).change();
});

请确保使用$this.val()而不是this.value以提高跨浏览器的可靠性。

我稍微修改了您的代码。检查这个：

    <script type="text/javascript">
$(document).ready(function(){
$('.boxes div').hide();
$(".thechoices").change(function(){
var id = $(this).attr("id").replace("thechoices_", "");
var value = parseInt($(this).val());
$("#boxes_" + id + " div:eq(" + (value -1) + ")").show().siblings().hide();
});
$(".thechoices").change();
});
</script>
<select class="thechoices" id="thechoices_1">
<option value="1">Box 1</option>
<option value="2">Box 2</option>
<option value="3">Box 3</option>
</select>
<!-- the DIVs -->
<div class="boxes" id="boxes_1">
<div><p>Box 1 stuff...</p></div>
<div><p>Box 2 stuff...</p></div>
<div><p>Box 3 stuff...</p></div>
</div>
<select class="thechoices" id="thechoices_2">
<option value="1">Box 1</option>
<option value="2">Box 2</option>
<option value="3">Box 3</option>
</select>
<!-- the DIVs -->
<div class="boxes" id="boxes_2">
<div><p>Box 1 stuff...</p></div>
<div><p>Box 2 stuff...</p></div>
<div><p>Box 3 stuff...</p></div>
</div>

这将在任何select标签上运行：

$("select").change(function(){
    $("#" + this.value).show().siblings().hide();
});
相关文章：