根据点击切换 Div

Question

基本上，我需要一个兴趣点键，它有 8 个 div 按钮，当每个按钮被点击时，都会显示信息。单击它们将打开或关闭它们，并且可以同时显示多个。单击第八个按钮时，将显示全部。我对代码有一个粗略的了解，但我想使用 jquery 来检测 8 个独特的 DIVS 何时是 click/unclicked，我发现这个例子使用输入类型......

<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's切换（）。如下：

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

Answer 2

这是你想要的吗？

对于切换所有按钮，我检查是否显示所有信息，如果是则关闭所有信息，否则显示所有信息

<!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>

根据点击切换 Div

Toggle Divs Based on Click

javascript

jquery

toggle