0

1 つの div をクリックすると、他の 2 つの div ボタンが「オフ」になり、一部のコンテンツが非表示になるようにしようとしています。

jquery:

    var open1 = false;
    var open2 = false;
    var open3 = false;

    $(document).ready(function(){



$("#gun").on('click',
   function(){
        open2 = !open2;

        if(open2) {
          $("img.dataselectgun").fadeTo(0, 1.0);
          $("img.dataselectpop").fadeTo(0, 0.0);
          $("img.dataselectart").fadeTo(0, 0.0);
          $("#popactivated").attr("id","pop");
          $("#artactivated").attr("id","art");
          $(this).attr("id","gunactivated");
        }
        else {
            $("img.dataselectpop").fadeTo(0, 1);
            $("img.dataselectart").fadeTo(0, 1);
            $("#gunactivated").attr("id","gun");
        }

   }
);

$("#pop").on('click',
   function(){
        open1 = !open1;

        if(open1) {
          $("img.dataselectgun").fadeTo(0, 0.0);
          $("img.dataselectpop").fadeTo(0, 1.0);
          $("img.dataselectart").fadeTo(0, 0.0);
          $("#gunactivated").attr("id","gun");
          $("#artactivated").attr("id","art");
          $(this).attr("id","popactivated");

        }
        else {
            $("img.dataselectgun").fadeTo(0, 1);
            $("img.dataselectart").fadeTo(0, 1);
            $("#popactivated").attr("id","pop");
        }

   }
);

$("#art").on('click',
   function(){
        open3 = !open3;

        if(open3) {
          $("img.dataselectgun").fadeTo(0, 0.0);
          $("img.dataselectpop").fadeTo(0, 0.0);
          $("img.dataselectart").fadeTo(0, 1.0);
          $("#popactivated").attr("id","pop");
          $("#gunactivated").attr("id","gun");
          $(this).attr("id","artactivated");
        }
        else {
            $("img.dataselectgun").fadeTo(0, 1);
            $("img.dataselectpop").fadeTo(0, 1);
            $("#popactivated").attr("id","art");
        }

   }
);

    });

jquery がたくさんあるので、html は次のとおりです。

    <div id="header">
    <div class="home" id="home" ><a href="index.html"><p><img class="rollover" src="images/home-crown.png" width="100px" /></p></a></div>
    <div class="topnav" id="gun"><p>GUN</p></div>
    <div class="topnav" id="pop"><p>POP</p></div>
    <div class="topnav" id="art"><p>ART</p></div>
</div>
    <div id="bodyparts">
    <div class="pillow" ></div>
    <div class="content" id="artbox"><p><img class="dataselectart" src="images/art9.png" width="300px" /></p></div>
    <div class="content" id="popbox"><p><img class="dataselectpop" src="images/pop9.png" width="300px" /></p></div>
    <div class="content" id="gunbox"><p><img class="dataselectgun" src="images/gun9.png" width="300px" /></p></div>
</div>

大きなコードについては申し訳ありませんが、ここに主な問題があります。個々の「ボタン」は機能しますが、2 つの「ボタン」がクリック (または true) されると、競合が発生します。私は切り替えを試みましたが、同じ問題を受け取りました。これが切り替えで行われる場合、それは素晴らしいことですが、私はjqueryが初めてで、方法がわかりません。どんな助けでも素晴らしいでしょう

事前に感謝します（私のコードは長くて面倒です。申し訳ありません）

編集：提案でいくつか変更しました。よりうまく機能しますが、別の if/else に if /else で影響を与える方法はありますか (jquery で jquery を効果的に変更しますか?)

4

1 に答える 1

1

クリックされたものだけを表示したい場合は、状態の追跡について心配する必要はありません。これは、次の方法で実行できます。

jsフィドル

$(document).ready(function () {
    $('.topnav').on('click', function () {

        // Get the <img> tag for the link that was clicked
        var myImg = $('.dataselect' + this.id);

        // Fade the <img> tag
        myImg.fadeTo(0, 1.0);

        // Get the other <img> tags, exclude myImg and fade them
        $('.content img').not(myImg).fadeTo(0, 0.0);

    });
});
于 2013-03-30T05:46:11.150 に答える