JQuery Return class 名称基于部分字符串

Question

我有几个 div 的 class 名称表示步骤：

<div class="steps jsStep1 circle">Step 1</div>
<div class="steps jsStep2 circle">Step 2</div>
<div class="steps jsStep3 circle">Step 3</div>

我的 js 是这样连接的：

$(document).on("click", ".steps", function () {
     var selectedStep = $(this).attr('class').match('["jsStep"]')
});

我想要实现的是获得完整的 class 名称，例如 "jsStep3" 如果 div 被点击。我得到的是 ["s"]。如有任何建议，我们将不胜感激。

Answer 1

你得到 ["s"] 的原因是字符串 '["jsStep"]' 将被转换为正则表达式 /["jsStep"]/ 并且第一个匹配项在所有情况下都是 s。

要使其工作，请提供 RegExp object as an argument of String#match 方法。

$(document).on("click", ".steps", function() {
  var selectedStep = $(this).attr('class').match(/jsStep\d+/)[0];
  console.log(selectedStep);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="steps jsStep1 circle">Step 1</div>
<div class="steps jsStep2 circle">Step 2</div>
<div class="steps jsStep3 circle">Step 3</div>

但更好的方法是使用自定义 data-* 属性，它可以通过 data() 方法轻松获得。

$(document).on("click", ".steps", function() {
  var selectedStep = $(this).data('step');
  console.log(selectedStep);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-step="jsStep1" class="steps circle">Step 1</div>
<div data-step="jsStep2" class="steps circle">Step 2</div>
<div data-step="jsStep3" class="steps circle">Step 3</div>

JQuery Return class 名称基于部分字符串

JQuery Return class name based on partial string

jquery

jquery-selectors