Question

我正在努力寻找单个数据值。下面是我的示例代码：

var num = 0;

var element = <div> {num} </div>
ReactDOM.render(
    element,
    document.getElementById("root")
)
num++;

ReactDOM.render(
    element,
    document.getElementById("root")
)

num++;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-aclass="Question1" />
<input type="text" data-aclass="inQuestion1 Attention" />
<input type="text" data-aclass="inQuestion2 Physical" />

在这里，$(':text[data-aclass^=Que]').on("change", function() { var currentQuestion = "", inQuestion = ""; currentQuestion = $(this).data("aclass"); var inQ = "in" + currentQuestion; inQuestion = $("[data-aclass='" + inQ + "']"); });的长度为$("[data-aclass='" + inQ + "']")，如果我从0属性中删除了Attention，它将得到我想要的结果。在这种情况下我该怎么办？

Answer 1

问题是因为您的选择器是[data-aclass='inQuestion1']，它需要对该值进行 exact 匹配，但是您要查找的元素在该属性中具有其他值，例如以及inQuestionN。因此，您还需要在此处使用“属性始于”选择器：

$(':text[data-aclass^=Que]').on('change', function() {
  var currentQuestion = '', inQuestion = '';
    
  currentQuestion = $(this).data('aclass');
  var inQ = 'in' + currentQuestion;
  inQuestion = $('[data-aclass^="' + inQ + '"]'); // note ^ here
  
  console.log(inQuestion.length);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-aclass="Question1" />
<input type="text" data-aclass="inQuestion1 Attention" />
<input type="text" data-aclass="inQuestion2 Physical" />

编辑：

鉴于您在以下有关与inQuestion10等贪婪匹配的评论，那么一种解决方法是改用filter()。然后，您可以将data属性拆分为一个数组，并确定其中是否包含确切的值：

$(':text[data-aclass^=Que]').on('change', function() {
  var currentQuestion = $(this).data('aclass');
  var inQ = 'in' + currentQuestion;
  
  var $inQuestion = $('[data-aclass]').filter(function() {
    var values = $(this).data('aclass').split(' ');
    return values.indexOf(inQ) != -1;
  });
  
  console.log($inQuestion.data('aclass'));
  console.log($inQuestion.length);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-aclass="Question1" />
<input type="text" data-aclass="inQuestion1 Attention" />
<input type="text" data-aclass="inQuestion2 Physical" />
<input type="text" data-aclass="inQuestion10 Physical" />
<input type="text" data-aclass="inQuestion111 Physical" />

从多个值中查找单个数据属性值

1 个答案: