javascript - jQuery を使用して表示/非表示を切り替える

Question

以下のコードがあります。各 div タグは、CSS によってに設定され、他にdisplay: none;は何も設定されていません。選択ボックスに、選択した div とその内容のみを表示し、残りは非表示にしたい。シンプルなものが欠けているような気がしますが、わかりません。jQuery 1.8.1 を使用しています。前もって感謝します！

注意として、このリンクのコードを自分の目的のために編集しました。私は javascript に驚異的ではないので、これはおそらくひどいものです。

<script type="text/javascript">
$(document).ready(function(){
$("#choices").change(function(){

if ($(this).val() == "option1" ) {

    $("#option1").slideDown("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option2" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideDown("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option3" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideDown("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option4" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideDown("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option5" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideDown("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option6" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideDown("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option7" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideDown("fast");

} 

});
</script>
random body text
<form>
<select id="choices">
    <option value="none">Select one...</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
</select>
</form>
    <div id="option1" class="hide">Opt 1 Text</div>
    <div id="option2" class="hide">Opt 2 Text</div>
    <div id="option3" class="hide">Opt 3 Text</div>
    <div id="option4" class="hide">Opt 4 Text</div>
    <div id="option5" class="hide">Opt 5 Text</div>
    <div id="option6" class="hide">Opt 6 Text</div>
    <div id="option7" class="hide">Opt 7 Text</div>

score 4 · Accepted Answer

ID で要素を選択するためにクラスセレクターを使用しています。#代わりに使用する必要があります.。jQuery セレクターは CSS セレクターのように機能します。コードを縮小することもできます。

$("#choices").change(function(){ 
   $('.hide').slideUp();
   $('#'+this.value).slideDown()
});

http://jsfiddle.net/X7AbR/

score 1 · Accepted Answer

あなたのセレクターは以下を使用しています：

$('.optionX')

それがいつあるべきか：

$('#optionX')

これは、'optionX' がクラスではなく ID であるためです。クラスの場合、「.optionX」が機能します。

score 0 · Accepted Answer

うわー...誰かがDRY（「Do n't Repeat Yourself」）のことを聞いたことがありません。1つの単純なループで、そのすべてのコードが強制終了されます。

$("#choices").change(function() {
  for( var i=1; i<=7; i++) {
      $("#option"+i)["slide"+($(this).val() == "option"+i ? "Down" : "Up")]("fast");
  }
});

また、私があなたの問題を修正したことに注意してください：クラス名に含ま.choicesれるすべての要素を参照します。IDを持つ要素を参照します。choices#choiceschoices

score 0 · Accepted Answer

要素を取得するために間違った CSS セレクターを使用しています。

$(".choices").change(function(){

セレクターはクラス名で要素を選択します。.クラス「choices」を持つ要素はありません。ここで必要なのは$("#choices")、id で選択する要素です。

オプションの選択にも同じことが当てはまります。クラス.ごとに選択し、選択する必要がある ID を持つ要素があります。#

資力：

jQuery IDセレクター

jQuery クラスセレクター

jQuery セレクター

score 0 · Accepted Answer

あなたのセレクターは間違っています。HTMLでIDを使用していますが、jqueryでクラスを使用しています。それを修正するには、変更します

$(".choices")に$("#choices")

$(".optionX")に$("#optionX")

フィドルの例: http://jsfiddle.net/johnkoer/UDKrA/10/

score 0 · Accepted Answer

セレクターを動的に構築し、次の.siblings()メソッドを採用します。

$("#choices").change(function(){ // that's an ID, not a class
    var val = $(this).val();
    $('#'+val).slideDown('fast').siblings('.hide').slideUp('fast');
});

http://jsfiddle.net/mblase75/QkNX4/

javascript - jQuery を使用して表示/非表示を切り替える

6 に答える 6

Related

Reference