jQuery 获取以以下开头的类

Question

我有以下 HTML

<button class="c1 c2 user-1"></button>
<button class="c1 c2 user-2"></button>
<button class="c1 c2 user-3"></button>

我知道点击了哪个按钮，如何从中获取 user-# 类？

Answer 1

一种方法是使用正则表达式来分解 class 属性值，如下所示:

$('button').click(function() {
  var classes = $(this).attr('class');
  var userClass = classes.match(/user\-\d+/gi)[0];
  console.log(userClass);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2 user-1"></button>
<button class="c1 c2 user-2"></button>
<button class="c1 c2 user-3"></button>
<button class="c1 c2 user-111 foo1"></button>

然而，更可扩展、灵活且可靠的解决方案是将 user-X 值存储在元素的 data 属性中:

$('button').click(function() {
  var user = $(this).data('user');
  console.log(user);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2" data-user="user-1"></button>
<button class="c1 c2" data-user="user-2"></button>
<button class="c1 c2" data-user="user-3"></button>