[英]Hiding / showing a checkboxes based on a previously selected checkbox (based on the data-attribute) jquery
[英]Showing/Hiding Div based on Data Attribute
我试图隐藏具有特定数据属性的元素,但这样做有问题。 在这种情况下,我试图根据用户单击的按钮隐藏交易或优惠券。 还尝试根据显示全部显示所有内容。
有人可以帮助我做错什么吗?
在这里编码
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>
您只是让您的条件落后。 当您本应显示交易时就隐藏了交易,反之亦然,优惠券也是如此。
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
}
(您可以使用else
尽管这并不重要。)
也就是说,您可以更简单地做到这一点:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.