Question

我有一些带有类名的div表示步骤：

<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"]')
});

我想要实现的是获得完整的班级名称，例如＆＃34; jsStep3＆＃34;如果点击该div。我得到的是[＆＃34; s＆＃34;]。任何建议将不胜感激。

Answer 1

您获得["s"]的原因是因为字符串'["jsStep"]'会转换为正则表达式/["jsStep"]/，并且第一次匹配在所有情况下都是s。

要使其工作，请提供RegExp对象作为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返回基于部分字符串的类名

1 个答案: