使用 jQuery 切换时隐藏其他 div

Question

我有三个按钮 - 每个按钮都有一个 .toggleClass() 显示/隐藏不同的元素。这是按预期工作的：当我打开和关闭按钮时，它们各自的 div 会显示和隐藏。

那太好了，这里有一个最小的简化版本的代码，你可以看看我到目前为止所取得的成就：

// Toggles for filter groups

$('.z-btn-weapons').on('click', function(e) {
    $('.z-weapons').toggleClass("z-shown");
});

$('.z-btn-armors').on('click', function(e) {
    $('.z-armors').toggleClass("z-shown");
});

$('.z-btn-miscs').on('click', function(e) {
    $('.z-miscs').toggleClass("z-shown");
});

.z-weapons, .z-armors, .z-miscs{
    display: none;
}

.z-shown {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="button-group">
         <button class="z-btn-armors">Armor</button>
         <button class="z-btn-weapons">Weapons</button>
         <button class="z-btn-miscs">Misc</button>
</div>
  
<div class="z-armors">
    Armor blablabla
</div>

<div class="z-weapons">
    Weapons blablabla
</div>

<div class="z-miscs">
  Miscellaneous blablabla
</div>

但是，我现在想要做的，也是我正在努力解决的问题是，当我刚刚切换其中一个元素时，如何隐藏另外两个元素。

例如，我打开“装甲”，然后当我接下来切换“武器”时，“装甲”应该会消失。无论我使用什么切换，广告都是无限的。

我尝试将 if/else 语句与 addClass()/removeClass() 和 show()/hide() 结合使用，但无济于事。我认为我的逻辑是错误的，因为足够多的点击会阻止它们出现：

    if ($('.z-weapons').hasClass("z-shown")) {
        $('.z-armors').toggleClass("z-shown");
        $('.z-miscs').toggleClass("z-shown");
    }
else if ($('.z-armors').hasClass("z-shown")) {
            $('.z-weapons').toggleClass("z-shown");
            $('.z-miscs').toggleClass("z-shown");
    }
else if ($('.z-miscs').hasClass("z-shown")) {
            $('.z-weapons').toggleClass("z-shown");
            $('.z-armors').toggleClass("z-shown");
    }

所以是的，我现在有点卡在这里。有没有人有办法解决吗？我希望在查看其中一个元素时隐藏另外两个元素。

Answer 1

一个选项，它也使这个可扩展（所以你可以在未来添加更多“类型”而无需太多代码）是给所有不同的“类型”一个额外的类，这样你就可以一次引用它们

<div class="z-items z-armors"></div>
<div class="z-items z-weapons"></div>

然后将它们全部隐藏

$(".z-items").hide();

或者，在您的情况下，删除 .z-shown 类，不包括您要显示的类（保留您的切换功能）

$(".z-items").not(".z-armors").removeClass("z-shown");

更新了sn-p：

// Toggles for filter groups

$('.z-btn-weapons').on('click', function(e) {
    $('.z-items').not(".z-weapons").removeClass("z-shown");
    $('.z-weapons').toggleClass("z-shown");
});

$('.z-btn-armors').on('click', function(e) {
    $('.z-items').not(".z-armors").removeClass("z-shown");
    $('.z-armors').toggleClass("z-shown");
});

$('.z-btn-miscs').on('click', function(e) {
    $('.z-items').not(".z-miscs").removeClass("z-shown");
    $('.z-miscs').toggleClass("z-shown");
});

.z-weapons, .z-armors, .z-miscs{
    display: none;
}

.z-shown {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="button-group">
         <button class="z-btn-armors">Armor</button>
         <button class="z-btn-weapons">Weapons</button>
         <button class="z-btn-miscs">Misc</button>
</div>
  
<div class="z-items z-armors">
    Armor blablabla
</div>

<div class="z-items z-weapons">
    Weapons blablabla
</div>

<div class="z-items z-miscs">
  Miscellaneous blablabla
</div>

---

要进一步减少代码，请将目标类放在按钮上。这也意味着将来添加新的“类型”将不需要任何代码更改，因为它是数据驱动的。

$(".z-btn").on('click', function(e) {
  var target = "." + $(this).data("target");
    $('.z-items').not(target).removeClass("z-shown");
    $(target).toggleClass("z-shown");
});

.z-weapons, .z-armors, .z-miscs{
    display: none;
}

.z-shown {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="button-group">
     <button class="z-btn" data-target="z-armors">Armor</button>
     <button class="z-btn" data-target="z-weapons">Weapons</button>
     <button class="z-btn" data-target="z-miscs">Misc</button>
</div>
  
<div class="z-items z-armors">
    Armor blablabla
</div>

<div class="z-items z-weapons">
    Weapons blablabla
</div>

<div class="z-items z-miscs">
  Miscellaneous blablabla
</div>

Answer 2

你可以使用removeClass():

// Toggles for filter groups

$('.z-btn-weapons').on('click', function(e) {
    $('.z-weapons').toggleClass("z-shown");
    $('.z-armors, .z-miscs').removeClass('z-shown');
});

$('.z-btn-armors').on('click', function(e) {
    $('.z-armors').toggleClass("z-shown");
    $('.z-weapons, .z-miscs').removeClass('z-shown');
});

$('.z-btn-miscs').on('click', function(e) {
    $('.z-miscs').toggleClass("z-shown");
    $('.z-weapons, .z-armors').removeClass('z-shown');
});

.z-weapons, .z-armors, .z-miscs{
    display: none;
}

.z-shown {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="button-group">
         <button class="z-btn-armors">Armor</button>
         <button class="z-btn-weapons">Weapons</button>
         <button class="z-btn-miscs">Misc</button>
</div>
  
<div class="z-armors">
    Armor blablabla
</div>

<div class="z-weapons">
    Weapons blablabla
</div>

<div class="z-miscs">
  Miscellaneous blablabla
</div>

Answer 3

首先，我建议您只使用 1 个事件处理程序。单击时元素的行为始终相同。否则你的代码会很快变得混乱。您现在需要更改所有 3 个事件处理程序才能实现代码的第二部分。

为此，您需要在所有按钮上或在共同父级上创建一个新类。您需要将按钮的目标保存在数据属性中：

// all buttons that are children of the element .toggle-buttons get the event handler attached
$('.toggle-buttons > button').on('click', function() {
  // get the target that should get toggled
    let target = $(this).data('target');
  // remove the class from all elements that are not the current target
  $('.z-shown').not( target ).removeClass('z-shown');
  // toggle the class on the target
    $(target).toggleClass("z-shown");
});

.z-weapons, .z-armors, .z-miscs{
    display: none;
}

.z-shown {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-group toggle-buttons">
  <button class="z-btn-armors" data-target=".z-armors">Armor</button>
  <button class="z-btn-weapons" data-target=".z-weapons">Weapons</button>
  <button class="z-btn-miscs" data-target=".z-miscs">Misc</button>
</div>
  
<div class="z-armors">
    Armor blablabla
</div>

<div class="z-weapons">
    Weapons blablabla
</div>

<div class="z-miscs">
  Miscellaneous blablabla
</div>