显示与其他div中的属性匹配的div值
显示与其他div中的属性匹配的div值
提问于 2021-09-01 08:47:22
我有两个用PHP循环创建的divs：
<div class="sku">
<span class="sku-value" data-id="150">1000</span>
<span class="sku-value" data-id="151">2000</span>
<span class="sku-value" data-id="152">3000</span>
</div>
<div class="size-values">
<span class="size-value" data-id="150">M</span>
<span class="size-value" data-id="151">L</span>
<span class="size-value" data-id="152">XL</span>
</div>这些divs具有父div，称为属性。
数据和大小值有一些共同之处：sku-value -id属性。
使用CSS，我正在处理sku-value跨度：
.sku-value {
display:none;
}
.sku-value.active {
display:inline-block;
}对于jQuery，我只显示第一个大小值：
$('.sku-value:first').addClass('active');因此，在这种情况下，当页面加载时，只有这个sku-value是可见的：
<span class="sku-value" data-id="150">1000</span>使用下面的代码，我可以成功地更改每个单击的size-value的活动类，但是如何更改与data-id值匹配的显示sku-value呢？
例如:如果用户单击具有数据id 152的大小值之一，我如何显示具有数据id 152的sku-value并隐藏当前可见的sku-value
$(document).ready(function(){
$('.sku-value:first').addClass('active');
$('.attributes').find('.size-value').on('click', function(){
if ($this.hasClass('active')) {
$this.removeClass('active');
} else {
$this.closest('.size-values').find('.size-value').removeClass('active');
$this.addClass('active');
}
});
});Stack Overflow用户
回答已采纳
发布于 2021-09-01 09:15:43
要实现所需的功能，您可以检索所单击元素的data-id，然后使用filter()通过该data属性检索所有元素，然后在这些元素上设置active类。
下面是一个示例，展示了如何做到这一点，并对逻辑进行了一些调整，使其更加简洁：
$(document).ready(function() {
let $skuAttributes = $('.sku-value');
let $sizeAttributes = $('.size-value');
let $allAttributes = $skuAttributes.add($sizeAttributes);
// set default state on page load
$skuAttributes.first().addClass('active');
$sizeAttributes.first().addClass('active');
// on click of a size attribute, set active class on all relevant elements
$sizeAttributes.on('click', function() {
$sizeAttributes.removeClass('active');
let dataId = $(this).data('id');
$allAttributes.removeClass('active').filter((i, el) => el.dataset.id == dataId).addClass('active');
});
});div { font-size: 1.3em; }
.sku-value { display: none; }
.sku-value.active { display: inline-block; }
.active { color: #C00; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="attributes">
<div class="sku">
<span class="sku-value" data-id="150">1000</span>
<span class="sku-value" data-id="151">2000</span>
<span class="sku-value" data-id="152">3000</span>
</div>
<div class="size-values">
<span class="size-value" data-id="150">M</span>
<span class="size-value" data-id="151">L</span>
<span class="size-value" data-id="152">XL</span>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69010532
复制相关文章
相似问题
腾讯云开发者
