Question

基本上，我需要一个兴趣点键，它有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

不是这样的答案，而是一个观察： - 你不需要所有那些如果......只需点击复选框就可以获得价值并使用它来直接定位div'＃s切换（）。如下：

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

Answer 2

这是你想要的吗？

对于toggle all按钮，我检查是否显示所有信息，如果为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>

根据点击

2 个答案: