3

ここに未完成のスクリプトがあります：

<script type="text/javascript">
        $(document).ready(function(){
           $('#box1').hide();
           $('#box2').hide();
           $('#box3').hide();
           $("#thechoices").change(function(){
              if(this.value == 'all'){
                     $("#boxes").children().show();
                  }else{
                     $("#" + this.value).show().siblings().hide();
                  }
           });          
           $("#thechoices").change(); 
        });
</script>

HTMLは次のとおりです。

<div id="SelectedBoxContainer">
    <!--Selected DivByID goes here-->
</div>


<!--Selected one of these Divs-->
<div id="boxes">
    <div id="box1"><p>Box 1 stuff…&lt;/p></div>
    <div id="box2"><p>Box 2 stuff…&lt;/p></div>
    <div id="box3"><p>Box 3 stuff…&lt;/p></div>
    <div id="box4"><p>Box 1 stuff…&lt;/p></div>
    <div id="box5"><p>Box 2 stuff…&lt;/p></div>
    <div id="box6"><p>Box 3 stuff…&lt;/p></div>
</div>

必要なのは、Dropdownlist を使用してdiv id="boxes"から div を選択し、 div id="SelectedBoxContainer"内に描画することです。

それを達成する方法は？前もって感謝します！

4

3 に答える 3

2

を使用して div を移動でき.appendTo()ますが、HTML は現在、それを維持するのに適していません。<div>簡単に追跡できるように、表示/非表示/移動されている s にクラスを配置します。

<div id="boxes">
    <div id="box1" class="resultBox"><p>Box 1 stuff…&lt;/p></div>
    <div id="box2" class="resultBox"><p>Box 2 stuff…&lt;/p></div>
    <div id="box3" class="resultBox"><p>Box 3 stuff…&lt;/p></div>
    <div id="box4" class="resultBox"><p>Box 1 stuff…&lt;/p></div>
    <div id="box5" class="resultBox"><p>Box 2 stuff…&lt;/p></div>
    <div id="box6" class="resultBox"><p>Box 3 stuff…&lt;/p></div>
</div>

これで、変更ハンドラを次のように書き直すことができます。

$("#thechoices").change(function(){
    if(this.value == 'all'){
        $(".resultBox").appendTo($("#SelectedBoxContainer")).show();
    }else{
        $(".resultBox:not(#" + this.value + ")").hide().appendTo($("#boxes"));
        $("#" + this.value).appendTo($("#SelectedBoxContainer")).show();
    }
});

トリックは、.appendTo() のターゲット要素が 1 つしかない場合、jQuery は既に DOM にある要素を複製するのではなく、移動することです。

このソリューションでは、div の順序が保持されないことに注意してください。選択されていないものは非表示になるため、すべてが選択されている場合にのみ問題になります。

于 2013-03-13T13:17:35.937 に答える
1

で表示したいだけの場合は、div を表示および非表示にする必要はありません。次のSelectedBoxContainerようにすることができます。

var selectBox = $('#SelectedBoxContainer')
selectBox.empty();

var clone = $("#" + this.value).clone();
clone.appendTo(selectBox);
clone.show();
于 2013-03-13T13:12:38.820 に答える
0

変更イベントの後に取得する値が div id に一致すると仮定します。

これを試して

$("#thechoices").change(function(){
          if(this.value == 'all'){
                 $("#boxes").children().show();
              }else{
                  $("#" + this.value).show().siblings().hide();
                  $('#SelectedBoxContainer').html($("#" + this.value).clone());
              }
       });
于 2013-03-13T13:09:42.160 に答える