Question

如何比较两个元素的属性值然后修改属性？例如，我有一系列椅子的照片：红色，绿色，黑色等等，它们按“data-slick-index”排列。当选择一种颜色，比如红色时，我想比较照片的“颜色选项”属性，如果它们与所选颜色匹配（在这种情况下为红色），我想删除“data-slick-index”属性那些不是红色的，所以它们不会出现在缩略图中。

<div class="slick-track" style="opacity: 1; width: 3180px; transform: translate3d(-1680px, 0px, 0px);">
   <li class="grid__item medium-up--one-quarter product-single__thumbnails-item slick-slide slick-cloned" color-option="Army Green" data-slick-index="-4" aria-hidden="true" tabindex="-1" style="width: 60px; display: none; clear: none;">
   <li class="grid__item medium-up--one-quarter product-single__thumbnails-item slick-slide slick-cloned" color-option="Army Green" data-slick-index="-3" aria-hidden="true" tabindex="-1" style="width: 60px; display: none; clear: none;">
   <li class="grid__item medium-up--one-quarter product-single__thumbnails-item slick-slide" color-option="Candy Red" data-slick-index="34" aria-hidden="true" role="option" tabindex="-1" style="width: 60px; display: none; clear: none;">
   <li class="grid__item medium-up--one-quarter product-single__thumbnails-item slick-slide" color-option="Candy Red" data-slick-index="33" aria-hidden="true" role="option" tabindex="-1" style="width: 60px; display: none; clear: none;">
   <li class="grid__item medium-up--one-quarter product-single__thumbnails-item slick-slide" color-option="Navy Blue" data-slick-index="11" aria-hidden="true" role="option" tabindex="-1" style="width: 60px; display: none; clear: none;">
   <li class="grid__item medium-up--one-quarter product-single__thumbnails-item slick-slide" color-option="Navy Blue" data-slick-index="10" aria-hidden="true" role="option" tabindex="-1" style="width: 60px; display: none; clear: none;">

我现在拥有的是：

$(function() {
  $('li.product-single__thumbnails-item').each(function(){
 var $ColorOfEach = $(this).attr('color-option');
  var $GetSelectedElement = document.getElementById("FeaturedImage-product-template");
  var $SelectedColor = $GetSelectedElement.getAttribute("color-option");


    if ($ColorOfEach != $SelectedColor) { 
     $(this).removeAttribute('data-slick-index');
} 
});
 });

我不认为这是正确的，因为我从属性中删除属性，而不是从实际的Li元素中移除属性，任何人都可以帮助我吗？谢谢！

Answer 1

将removeAttribute替换为removeAttr，因为它的JavaScript 函数，你正在使用jQuery函数
第二个HTML也是错误的Li标签，总是在UL元素下

$(function() {
  $('li.product-single__thumbnails-item').each(function() {
    var $ColorOfEach = $(this).attr('color-option');
    var $GetSelectedElement = document.getElementById("FeaturedImage-product-template");
    var $SelectedColor = $mobilemodelselected.getAttribute("color-option");
    if ($ColorOfEach != $SelectedColor) {
      $(this).removeAttr('data-slick-index');
    }
  });
});

如何比较两个元素的属性值并修改其元素？

1 个答案: