根据数据属性显示/隐藏Div

Question

I am trying to hide elements that have specific data attributes but having issues doing so. In this case, I am trying to trying to hide deals or coupons based on the button user clicks. Also trying to show everything based on show all.

Can someone please help with what I am doing wrong.

Code here

 function showdeals(dealtype) { if (dealtype == "all") { $('div[data-deal-type="deal"]').show(); $('div[data-deal-type="coupon"]').show(); } if (dealtype == "deal") { $('div[data-deal-type="deal"]').hide(); $('div[data-deal-type="coupon"]').show(); } else if (dealtype == "coupon") { $('div[data-deal-type="deal"]').show(); $('div[data-deal-type="coupon"]').hide(); } } 

 <button onclick="showdeals('all')"> Show All </button> <button onclick="showdeals('deal')"> Show Deals </button> <button onclick="showdeals('coupon')"> Show coupons </button> <div id="536739" class="coupon-modal" data-deal-type="coupon" data-discount-type="data-coupon-rank=" xxx=""> Coupon1 </div> <div id="536738" class="coupon-modal" data-deal-type="coupon" data-discount-type="data-coupon-rank=" xxx=""> coupon2 </div> <div id="536737" class="coupon-modal" data-deal-type="deal" data-discount-type="data-coupon-rank=" xxx=""> Deal1 </div> <div id="536736" class="coupon-modal" data-deal-type="deal" data-discount-type="data-coupon-rank=" xxx=""> deal2 </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

You just have your conditions backward. You're hiding deals when you're supposed to show them, and vice-versa, and the same for coupons.

if (dealtype == "all") {
    $('div[data-deal-type="deal"]').show();
    $('div[data-deal-type="coupon"]').show();
}
if (dealtype == "deal") {
    $('div[data-deal-type="deal"]').hide();       // Should show
    $('div[data-deal-type="coupon"]').show();     // Should hide
}
else if (dealtype == "coupon") {
    $('div[data-deal-type="deal"]').show();       // Should hide
    $('div[data-deal-type="coupon"]').hide();     // Should show
}

(You could use another else although it doesn't really matter.)

That said, you can do it more simply:

function showdeals(dealtype) {
  $('div[data-deal-type="deal"]').toggle(
    dealtype == "all" || dealtype == "deal"
  );
  $('div[data-deal-type="coupon"]').toggle(
    dealtype == "all" || dealtype == "coupon"
  );
}

 function showdeals(dealtype) { $('div[data-deal-type="deal"]').toggle( dealtype == "all" || dealtype == "deal" ); $('div[data-deal-type="coupon"]').toggle( dealtype == "all" || dealtype == "coupon" ); } 

 <button onclick="showdeals('all')"> Show All </button> <button onclick="showdeals('deal')"> Show Deals </button> <button onclick="showdeals('coupon')"> Show coupons </button> <div id="536739" class="coupon-modal" data-deal-type="coupon" data-discount-type="data-coupon-rank=" xxx="">Coupon1</div> <div id="536738" class="coupon-modal" data-deal-type="coupon" data-discount-type="data-coupon-rank=" xxx="">coupon2</div> <div id="536737" class="coupon-modal" data-deal-type="deal" data-discount-type="data-coupon-rank=" xxx="">Deal1</div> <div id="536736" class="coupon-modal" data-deal-type="deal" data-discount-type="data-coupon-rank=" xxx="">deal2</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>