Question

此代码用于在none条件下将div集合的显示值设置为if：

$(".col-sm-4").click(function (e) {
    e.preventDefault();
    var allCategories = document.getElementsByClassName("ProductList");
        $(allCategories).each(function () {
            if ($(this).css("display", "block")) {
                $(this).css("display", "none");
            }
        })
    })

相关HTML

<div class="col-sm-4 rowitem" id="Snacks">
    <a href="#">
        <img src="~/XImages/snacks.png" />
    </a>
</div>
<div class="col-sm-4 rowitem" id="Baby">
    <a href="#">
        <img src="~/XImages/baby.png" />
    </a>
</div>
<div class="col-sm-4 rowitem" id="Perfumes">
    <a href="#">
        <img src="~/XImages/perfumes.png" />
    </a>
</div>

然后，我有多个div（全部隐藏）。因此，如果用户单击“小吃”，则会显示其相关的div。

<div class="ProductList" id="SnacksList" style="display:none">
<div class="ProductList" id="BabyList" style="display:none">
    Under construction
</div>
<div class="ProductList" id="PersonalCareList" style="display:none">
    Under construction
</div>

用于完成此操作的jQuery代码是：

$(".col-sm-4").click(function (e) {
    e.preventDefault();
    var id = (this).id;
    var targetDiv = document.getElementById(id + "List");
    if (targetDiv.style.display == "none") {
        targetDiv.style.display = "block";
        }
        else {
            targetDiv.style.display = "none";
        }
})

使用相关锚定按钮单击显示和隐藏div效果很好，但是只有在未单击相关按钮以隐藏div而是单击另一个锚定按钮（类别，即Perfumes）才能显示时，它才能停止工作。

希望这是有道理的。有人可以指导吗？

先谢谢了。

Answer 1

通过使用$(this).css("display", "block")，将属性display设置为block。如果要检查属性的值，则如果不查看if ($(this).css("display") === "block")的特定值，则需要使用if ($(this).is(":visible"))或block。有关JQuery.css()的更多信息，请参见here：

$("#myBtn").click(function(e)
{
    e.preventDefault();

    var allCategories = document.getElementsByClassName("ProductList");

    $(allCategories).each(function()
    {
        if ($(this).css("display") === "block")
            $(this).css("display", "none");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ProductList">P1</div>
<div class="ProductList">P2</div>
<div class="ProductList">P3</div>
<button id="myBtn">Hide All!</button>

但是，如果您想隐藏类.ProductList的可见元素，为简单起见，您的代码可以简化为下一个代码（假设您没有考虑block的特定值） display属性）：

$("#myBtn").click(function(e)
{
    e.preventDefault();
    $(".ProductList:visible").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ProductList">P1</div>
<div class="ProductList">P2</div>
<div class="ProductList">P3</div>
<button id="myBtn">Hide All!</button>

问题更新后编辑：

为您提供的另一种解决方案是，在您注册data-target处理程序时在元素上使用click属性，例如：

$(document).ready(function()
{
    $(".ProductList").hide();
    
    $(".col-sm-4.rowitem").click(function(e)
    {
        $('.ProductList').hide();
        var target = $(this).data("target");
        $(target).show();
    });
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">

<div class="row">
  <div class="col-sm-4 rowitem" id="Snacks" data-target="#SnacksList">
    <a href="#">
      <img src="https://via.placeholder.com/50?text=Snacks"/>
    </a>
  </div>
  <div class="col-sm-4 rowitem" id="Baby" data-target="#BabyList">
    <a href="#">
      <img src="https://via.placeholder.com/50?text=Baby"/>
    </a>
  </div>
  <div class="col-sm-4 rowitem" id="Perfumes" data-target="#PerfumesList">
    <a href="#">
      <img src="https://via.placeholder.com/50?text=Perfumes"/>
    </a>
  </div>
</div>

<div class="row">
  <div class="ProductList" id="SnacksList">
    Snacks List
  </div>
  <div class="ProductList" id="BabyList">
    Baby list
  </div>
  <div class="ProductList" id="PerfumesList">
    Perfumes List
  </div>
</div>

</div>

Answer 2

注释和OP更新后，您需要使用$('.ProductList').hide().filter("#" + id + "List").show()

$(".col-sm-4.rowitem").click(function (e) {
    var id = this.id;
    $('.ProductList').hide().filter("#" + id + "List").show()
});

.ProductList{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 rowitem" id="Snacks">
    <a href="#">
        <img src="~/XImages/snacks.png" />
    </a>
</div>
<div class="col-sm-4 rowitem" id="Baby">
    <a href="#">
        <img src="~/XImages/baby.png" />
    </a>
</div>
<div class="col-sm-4 rowitem" id="Perfumes">
    <a href="#">
        <img src="~/XImages/perfumes.png" />
    </a>
</div>

<div class="ProductList" id="SnacksList" >
    Under construction Snacks
</div>
<div class="ProductList" id="BabyList">
    Under construction Baby
</div>
<div class="ProductList" id="PerfumesList" >
    Under construction Perfumes
</div>

在jQuery中使用.each（）设置元素的显示

2 个答案: