根据点击切换Divs

Question

基本上，我需要一个Point of Interest Key，该键具有8个div按钮，单击每个按钮将显示信息。 单击它们可以打开或关闭它们，并且可以同时显示多个。 单击第八个按钮将显示全部。 我对代码有一个大概的了解，但是我想使用jQuery来检测何时单击/取消了8个唯一的DIVS，我发现了使用输入类型的示例……

<script type="text/javascript">

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).attr("value")=="red"){
            $(".red").toggle();
        }
        if($(this).attr("value")=="green"){
            $(".green").toggle();
        }
        if($(this).attr("value")=="blue"){
            $(".blue").toggle();
        }
    });
});
</script>

http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-checkboxes

Answer 1

不是这样的答案，而是一种观察：-您不需要所有这些If ...，只需单击复选框即可获取值，并使用该值直接定位div的toggle（）。 如下：

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var clicked=$(this).val();
            $("." + clicked).toggle();
    });
});

Answer 2

这是你想要的吗？

对于“全部切换”按钮，我检查是否显示了所有信息，如果为true，则关闭所有信息，否则显示所有信息

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Show Hide Using Checkboxes</title> <style type="text/css"> .box{ padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .btn, .specialBtn{ width: 35%; padding: 20px; border: 1px solid #000; cursor: pointer; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.btn').click(function(){ var id = $(this).data("toggleid"); if(id == "0"){ // toggle all var visibleCount = $(".box:visible").length; if(visibleCount < 3) $(".box").show(); else $(".box").hide(); } else{ $("#info" + id).toggle(); } }); }); </script> </head> <body> <div> <div class="btn" data-toggleid="1">toggle info 1</div> <div class="btn" data-toggleid="2">toggle info 2</div> <div class="btn" data-toggleid="3">toggle info 3</div> <div class="btn" data-toggleid="0">toggle all</div> </div> <div class="box" id="info1">info1</div> <div class="box" id="info2">info2</div> <div class="box" id="info3">info3</div> </body> </html>

根据点击切换Divs

问题描述

2 个解决方案

解决方案1
0 2016-03-16 01:02:28

解决方案2
0 已采纳 2016-03-16 01:16:07

根据点击切换Divs

问题描述

2 个解决方案

解决方案1 0 2016-03-16 01:02:28

解决方案2 0 已采纳 2016-03-16 01:16:07

解决方案1
0 2016-03-16 01:02:28

解决方案2
0 已采纳 2016-03-16 01:16:07