gpt4 book ai didi

javascript - 当使用 jquery 或 javascript 选中 2 个复选框时,如何过滤 div 列表?

转载 作者:行者123 更新时间:2023-11-30 11:14:06 24 4
gpt4 key购买 nike

我有一个包含 4 个 div 的列表,我使用 2 个复选框根据特定 div 的存在来过滤列表。在我选中两个复选框之前,过滤效果很好。

正如您在我下面的代码中看到的,如果您尝试同时选中“Card”和“Paypal”复选框,列表就会消失。相反,我需要显示所有 4 个 div。我怎样才能让它以这种方式工作?

代码如下:

$("#by-card").change(function() {
$('.store-block .store-payment-options').each(function() {
if ($(this).find('.card-available').length === 0) {
$(this).parent(".store-block").toggleClass('hide-me');
}
});
});



$("#by-paypal").change(function() {
$('.store-block .store-payment-options').each(function() {
if ($(this).find('.paypal-available').length === 0) {
$(this).parent(".store-block").toggleClass('hide-me');
}
});
});
.search-area {
margin-bottom: 10px;
}

.storesList {
margin-top: 20px;
}

#count {
display: inline-block;
}

.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}

.rating {
position: absolute;
right: 70px;
top: 3px;
}

.minorder {
position: absolute;
right: 180px;
top: 3px;
}

.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}

.right {
float: right;
}

.left {
float: left;
}

.hide-me {
display: none;
}

.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes-area">
<div class=" inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>

<div class=" inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
</div>

<div class="storesList">
<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>

<div class="store-block">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>

<div class="store-block">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>

<div class="store-block">
<div class="store-name">Linux</div>
<div class="rating">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>

最佳答案

要获得该行为,您需要更改您拥有的代码:

  1. 你需要有一个 change paypal 复选框的函数和 card
  2. 然后,无论何时选中/取消选中任何复选框,您都可以循环这两个复选框以了解是否选中了其中任何一个。如果选中复选框,则显示类为 store-block 的元素我还添加了一个与 id 相同的类checkbox 的值(value)被点击。
  3. 使用此类值可以轻松确定属于特定复选框的 div 集。
  4. 您还需要管理所有复选框在选中后都未选中的情况,为此我使用了一个变量 oneChecked .

$(".inputRadioGroup input[type='checkbox']").change(function() {
var oneChecked = false;
$(".inputRadioGroup input[type='checkbox']").each(function(){
var checked = this.checked;
var checkedId = $(this).attr('id');
if(checked){
oneChecked = true;
$('.'+checkedId).show();
} else {
$('.'+checkedId).hide();
}
});
if(!oneChecked){
$('.store-block').show();
}
});
.search-area {
margin-bottom: 10px;
}

.storesList {
margin-top: 20px;
}

#count {
display: inline-block;
}

.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}

.rating {
position: absolute;
right: 70px;
top: 3px;
}

.minorder {
position: absolute;
right: 180px;
top: 3px;
}

.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}

.right {
float: right;
}

.left {
float: left;
}

.hide-me {
display: none;
}

.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes-area">

<div class="inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>


<div class="inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>


</div>


<div class="storesList">

<div class="store-block by-card">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>

<div class="store-block by-paypal">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>

<div class="store-block by-card">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>

<div class="store-block by-paypal">
<div class="store-name">Linux</div>
<div class="rating">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>



</div>

关于javascript - 当使用 jquery 或 javascript 选中 2 个复选框时,如何过滤 div 列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52342832/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com