Question

我有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经验，所以我不知道如何在一个页面上多次为许多“thechoices”工作。像复制粘贴的东西，但比这更合适：

    <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>

我知道你可以帮助我，这看起来很简单，但我无法解决这个问题。如何更改我的第二个代码以相同的方式工作，但不仅仅是两个选择器。我需要很多人。不想像我的第二个代码那样复制粘贴相同的部分。

Answer 1

避免重复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来实现跨浏览器的可靠性。

Answer 2

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

$("select").change(function(){
    $("#" + this.value).show().siblings().hide();
});

Answer 3

我稍微修改了你的代码。检查一下：

    <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>

js代码适用于一个变量（？），如何让它适用于许多？

3 个答案: