如何通过属性 jQuery 的值隐藏 div

Question

我想隐藏属性 show-value 等于 0 的 div。像这样：

<div class="card-tag card-product-new-tag" show-value="0">NEW</div>//this should be hidden
<div class="card-tag card-product-new-tag" show-value="1">NEW</div>//this should be visible

Html:

<div class="card-product">
     <img class="card-product-img" src="somewhere1">
     <img class="card-product-img2" src="somewhere2">
     <div class="card-tag card-product-new-tag" show-value="0">NEW</div>
     <div class="card-tag card-product-sale-tag" show-value="1">SALE</div>
     <div class="card-tag card-product-popular-tag" show-value="1">POPULAR</div>
     <div class="card-tag card-product-featured-tag" show-value="1">FEATURED</div
     <div class="card-product-name"><a href="">Product Title</a></div>
     <div class="card-product-price">99TL</div>
</div>

<div class="card-product">
     <img class="card-product-img" src="somewhere1">
     <img class="card-product-img2" src="somewhere2">
     <div class="card-tag card-product-new-tag" show-value="1">NEW</div>
     <div class="card-tag card-product-sale-tag" show-value="1">SALE</div>
     <div class="card-tag card-product-popular-tag" show-value="1">POPULAR</div>
     <div class="card-tag card-product-featured-tag" show-value="1">FEATURED</div
     <div class="card-product-name"><a href="">Product Title</a></div>
     <div class="card-product-price">99TL</div>
</div>

jQuery:

if ($(".card-product .card-product-new-tag").attr("show-value") == 0){
        $(".card-product .card-product-new-tag", this).hide();
    }

Answer 1

我假设您对包含属性 show-value.

的元素有一些共同点 class

我遍历每个元素并检查 show-value 属性是否为 0。如果值为零，那么我将隐藏该特定元素。为了更好地理解，请查看随附的代码片段。

$(".card-tag").each(function(){
  if ($(this).attr('show-value') == 0) {
    $(this).hide();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="card-product">
     <img class="card-product-img" src="somewhere1">
     <img class="card-product-img2" src="somewhere2">
     <div class="card-tag card-product-new-tag" show-value="0">NEW</div>
     <div class="card-tag card-product-sale-tag" show-value="1">SALE</div>
     <div class="card-tag card-product-popular-tag" show-value="1">POPULAR</div>
     <div class="card-tag card-product-featured-tag" show-value="1">FEATURED</div
     <div class="card-product-name"><a href="">Product Title</a></div>
     <div class="card-product-price">99TL</div>
</div>

<div class="card-product">
     <img class="card-product-img" src="somewhere1">
     <img class="card-product-img2" src="somewhere2">
     <div class="card-tag card-product-new-tag" show-value="1">NEW</div>
     <div class="card-tag card-product-sale-tag" show-value="1">SALE</div>
     <div class="card-tag card-product-popular-tag" show-value="1">POPULAR</div>
     <div class="card-tag card-product-featured-tag" show-value="1">FEATURED</div
     <div class="card-product-name"><a href="">Product Title</a></div>
     <div class="card-product-price">99TL</div>
</div>

如何通过属性 jQuery 的值隐藏 div

How to hide div by value of attribute jQuery

html

css

jquery

attributes