0

誰かが私が以下に持っているもののこのコードを変更するのを手伝ってくれませんか? ユーザーがbooming1をクリックするとbooming1が表示され、 booming2が非表示になり、その逆も同様です。

<div id="boom1" >click me</div>
<div id="boom2" >click me</div>
<div id="booming1" style="display:none;">show on click boom1</div>
<div id="booming2" style="display:none;">show on click boom2</div>


   $("#boom1").click(function () {
      $(".booming1").show(1000);

    });
        $("#boom2").click(function () {
      $(".booming2").show(1000);

    });
4

4 に答える 4

4

DOM にいくつかの変更が加えboomられ、対象となる要素ヘッダーにクラスが追加data-targetされ、表示される要素のセレクターが含まれます。また、ターゲット要素にクラスを追加しboomingて、それらを識別できるようにします。

boom要素にクリック ハンドラーを追加し、ハンドラー内boomで data-target を使用してターゲットを取得し、タイプのすべてのターゲット要素を非表示にしますbooming

<div class="boom" data-target="#booming1" >click me</div>
<div class="boom" data-target="#booming2" >click me</div>
<div id="booming1" class="booming" style="display:none;">show on click boom1</div>
<div id="booming2" class="booming" style="display:none;">show on click boom2</div>

と

$(".boom").click(function () {
    var $target = $($(this).data('target'));
    $(".booming").not($target).hide();
    $target.show();
});

デモ:フィドル

于 2013-09-03T00:35:45.940 に答える
0

それらにすべて同じクラスを与え、そのように操作します。また、簡単に操作できるように、クリックミー div 内にbooming1 とbooming2 を配置します。

例：

HTML:

<div class="boom" id="boom1" >click me
<div id="booming1" style="display:none;">show on click boom1</div>
</div>
<div class="boom" id="boom2" >click me
<div id="booming2" style="display:none;">show on click boom2</div>
</div>

jQuery:

$(".boom").click(function(event) {
    $(".boom").children().hide();
    $(this).children().show();
});

JSFiddle: http://jsfiddle.net/P5y2G/

于 2013-09-03T00:47:46.590 に答える