资源

Question

我需要什么： 我有一个大型数据集，它们具有多个属性。我需要搜索数据集并应用一个css类，如果它们包含某个属性 - 例如country。在下面的示例中，我希望能够单击一个按钮并更改具有数据属性的所有元素＆＃39; usa＆＃39;一个新的班级，蓝色。

我有什么： 我已经为每个元素应用了多个数据属性。虽然我知道这不是直接支持的，但我使用javascript将它们拆分成一个数组。然后，我尝试定位页面上的所有数组，如果它们包含值（例如国家/地区名称），则向它们添加一个类。我无法弄清楚如何在页面上定位所有数组，然后如果我这样做，如何将类直接应用于包含特定属性的类。

这是一个简化的模型：

<div id="collection">
<div class="countries" data-place="usa;canada;mexico"></div>
<div class="countries" data-place="usa;ireland;france"></div>
<div class="countries" data-place="spain;canada;mexico"></div>
<div class="countries" data-place="usa;spain;france"></div>
<div class="countries" data-place="portugal;canada;ireland"></div>
</div>

<button class="unitedstates">Change USA to Blue</button>

<script>

var data = document.getElementById('collection').getAttribute('data-country');
var arr = data.split(';');

$(".unitestates").click(function () {
console.log(arr);
    if (jQuery.inArray('usa', arr) > -1) {
        $("#countries").addClass('blue')
    }
});

Answer 1

使用Attribute Contains Selector [name*=”value”]选择 data-place 属性中 usa 的所有元素：

＆＃13;

$(".unitedstates").click(function() {  
  $('[data-place*="usa"]').addClass('mark');
});

＆＃13;

.mark {
  color: red;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="collection">
  <div class="countries" data-place="usa;canada;mexico">1</div>
  <div class="countries" data-place="usa;ireland;france">2</div>
  <div class="countries" data-place="spain;canada;mexico">3</div>
  <div class="countries" data-place="usa;spain;france">4</div>
  <div class="countries" data-place="portugal;canada;ireland">5</div>
</div>

<button class="unitedstates">Change USA to Blue</button>

＆＃13;

Answer 2

您可以按照以下步骤重新格式化代码：

使用jQuery内置函数data获取属性data-*。
使用some函数检查阵列是否符合特定条件。在您的情况下，这种情况：c === country。

请看这段代码：

＆＃13;

$(".unitestates").click(function() {
  var country = $('#collection').data('country');

  $('.countries').each(function() {
    var countries = $(this).data('place').split(';');
    if (countries.some( (c) => c === country ) ) {
      $(this).addClass('blue');
    }
  });
});

＆＃13;

.blue {
  background-color: blue;
  width: 100px;
  height: 10px;
  margin-top: 5px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="collection" data-country='usa'>
  <div class="countries" data-place="usa;canada;mexico"></div>
  <div class="countries" data-place="usa;ireland;france"></div>
  <div class="countries" data-place="spain;canada;mexico"></div>
  <div class="countries" data-place="usa;spain;france"></div>
  <div class="countries" data-place="portugal;canada;ireland"></div>
</div>

<button class="unitestates">Change USA to Blue</button>

＆＃13;

将类添加到具有多个数据属性的多个元素

2 个答案:

资源