2

ドロップダウンを使用して一部の div の表示プロパティを変更する簡単なコードがありますが、同じページに別のインスタンスを配置できるようにしたいと考えています。クラス名を使用してコンテンツの表示と非表示を定義しているため、現在は機能しません。

<div>
<select id="selectMe">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
<div class="group option1">asdf</div>
<div class="group option2">kljh</div>
<div class="group option3">zxcv</div>
<div class="group option4">qwerty</div>
</div>

<script>
$(document).ready(function () {
    $('.group').hide();
    $('.option1').show();
    $('#selectMe').change(function () {
        $('.group').hide();
        $('.'+$(this).val()).show();
    })
});
</script>

.group div をターゲットにして、ページ上で HTML のブロック全体を繰り返しても動作させる別の方法はありますか?

あなたが助けてくれることを願っています!

4

1 に答える 1

2

とにかくラッパーを作成したので、それを利用してください。ターゲットを設定するときは、親/コンテナーをコンテキストとして使用して、ページの他の場所で繰り返すことができるようにします。最も近いを使用して親 div に到達し、ドロップダウンの親内で.groupまたはを選択できます。.option

$(document).ready(function () {
    $('.group').hide();
    $('.option1').show();

    $('#selectMe').change(function () {
       var container = $(this).closest('.container');
        $('.group', container ).hide(); //Select only the group under its parent
        $('.' + this.value, container).show(); //Select only the target div under its parent
    })
});

フィドル

于 2013-06-18T01:58:22.553 に答える