Question

好吧，我试图这样做，当你点击一个div它“关闭”其他两个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>

对于大代码很抱歉，但这是主要问题，每个单独的“按钮”都可以工作但是当点击（或者是）两个“按钮”时它们会产生一些冲突;我尝试切换，但收到同样的问题，如果这是完成切换，这将是伟大的，但我是jquery的新手，不知道如何;任何帮助都会很棒

先谢谢（我知道我的代码很乱;对不起）

编辑：根据建议更改了一些内容;效果更好但有没有办法用if / else来影响另一个if / else（用jquery有效地改变jquery？）

Answer 1

如果您只想要显示已点击的那个，那么您无需担心跟踪状态。这可以通过以下方式完成：

jsFiddle

$(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);

    });
});

if / else jquery三个元素之间

1 个答案: