显示与其他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');
}
});
});回答 2
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用户
发布于 2021-09-01 23:47:15
这是我想出来的函数式、香草味的解决方案。几个帮助器函数分担繁重的任务，因此主要的侦听器函数保持简单和干净。
它不使用active类，而是使用可应用于sku跨度和size跨度的hidden类。
(我来晚了，因为我今天离线的时候写了这个脚本。)
const
// Collects DOM elements as arrays
sizes = [...document.getElementsByClassName("size-value")],
skus = [...document.getElementsByClassName("sku-value")],
spans = [...sizes, ...skus],
// Defines helper functions
isHidden = (_this) => _this.classList.contains("hidden"),
isActive = (_this) => sizes.every((size) => isHidden(size) || size === _this),
showAll = (_these) => _these.forEach((_this) => _this.classList.remove("hidden")),
hideAll = (_these) => _these.forEach((_this) => _this.classList.add("hidden")),
filterByDataId = (_these, id) => _these.filter(_this => _this.dataset.id === id);
// Invokes listener when user clicks a size
sizes.forEach(size => size.addEventListener("click", hideAndShow));
// Defines listener
function hideAndShow({target}){ // Destructures click event
if(isActive(target)){
showAll(spans);
}
else{
hideAll(spans);
showAll(filterByDataId(spans, target.dataset.id));
}
}div { margin: 1em 0; }
span { padding: 0.1em 0.3em; border: 1px solid grey; }
.hidden{ display: none; }<div class="sku">
<span class="sku-value" data-id="150">1000</span>
<span class="sku-value hidden" data-id="151">2000</span>
<span class="sku-value hidden" data-id="152">3000</span>
</div>
<div class="size-values">
<span class="size-value" data-id="150">Medium</span>
<span class="size-value" data-id="151">Large</span>
<span class="size-value" data-id="152">Xtra Large</span>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69010532
复制相关文章
相似问题
腾讯云开发者
