js代碼適用於一個變量（？），如何使它適用於很多？

-3

我有js的工作代碼，它顯示選定選項的不同div。js代碼適用於一個變量（？），如何使它適用於很多？

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

我知道你可以幫助我，它似乎很簡單，但我無法處理這一點。如何更改我的第二個代碼以相同的方式工作，但不僅適用於兩個選擇器。我需要它很多。不想像我的第二個代碼那樣複製粘貼相同的部分。

來源

2012-03-20 jerry87

你的問題是什麼？ – 2012-03-20 16:55:22

那麼是什麼問題？ – 2012-03-20 16:55:48

我只是不想用thechoices1 ... thechoices100創建大文件，我想使它變成動態的。 – jerry87 2012-03-20 16:59:19

我修改了一下你的代碼。檢查這一個：

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

來源

2012-03-20 17:12:43 safrazik

不錯的想法，但它顯示了所有選擇器下的所有3個盒子。無論我選擇什麼，沒有任何變化 - 3個選項仍然可見。 – jerry87 2012-03-20 17:21:12

出現語法錯誤，我修改了代碼。請再試:) – safrazik 2012-03-20 17:27:45

現在工作正常:)非常感謝！ – jerry87 2012-03-20 17:37:20

這將在任何select標籤運行：

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

來源

2012-03-20 16:59:56 graphicdivine

避免重複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以獲得跨瀏覽器可靠性。

來源

2012-03-20 17:03:57

對不起，它不起作用，問題是，在我做出選擇之前，沒有div可見，選擇選項後，我可以看到選定的div但只在第一步中，第二個選擇器仍顯示所有3個div。 – jerry87 2012-03-20 17:15:34

對不起，我錯過了關於多個選擇等（主要）的點。 – 2012-03-20 17:27:18

仍然不存在 - 一個時刻.... – 2012-03-20 17:29:39

js代碼適用於一個變量（？），如何使它適用於很多？

回答

相關問題