Question

我的数据属性有多个值存在问题。

我有一个带步骤的表单。在第一步中，我有一个节点：

<div id="step-0">
 <input id="nd1" type="radio" name="ordernode" value="val1">
 <input id="nd2" type="radio" name="ordernode" value="val2">
</div>

如果用户设置了第一个值，则data-node nd1（对此ID）的其他步骤将为class activated。

<div id="step-1" class="step" data-node="nd1">
 Step 1
</div>
<div id="step-3" class="step" data-node="nd1">
 Step 3
</div>

所以对于另一个节点。但是，有些步骤属于node 1和node 2。我不想在node 1和node 2之前创建相同的步骤，这就是为什么我尝试添加data-node属性2的原因像

这样的价值观

<div id="step-4" class="step" data-node="nd1,nd2">
    Step 4
</div>

此步骤属于node 1和node 2。

在JQuery中没有data-node属性的多个值我有

var nodeActive = $(this).find('input').attr('id');
$(this).parents('.sof_body').find('[data-node="'+nodeActive+'"]').addClass('activated');

它运行良好而且快速，我没有问题。但是有了多个值，我必须在每个步骤data-node属性中搜索并尝试在字符串中找到节点的id，如

var nodeActive = $(this).find('input').attr('id');
$(this).parents('.sof_body').find('.step').each(function(){
  var nodesBe = $(this).data('node');
  if (nodesBe.indexOf(''+nodeActive+'') >= 0){
      $(this).addClass('activated');
  }
});

此函数也可以工作，但比第一个更慢，导致在此函数之后调用的另一个函数的许多问题。

我的问题是，是否有另一种方法可以实现多重值的搜索功能，使其无each function，或者使其快速运行？

Answer 1

您可以使用Attribute Contains Selector修剪目标元素，并使用完全匹配.filter()

var nodeActive = $(this).find('input').attr('id');
$(this).closest('.sof_body').find('.step[data-node*=' + nodeActive + ']').filter(function () {
    return $(this).data('node').split(',').indexOf(nodeActive) > -1;
}).addClass('activated');

搜索具有多个值的数据属性的值

1 个答案: