Question

我正在制作简单的网站但坚持使用非常简单的概念，即从具有多个类的按钮获取类属性值的值。当我尝试使用attr()时，它显示了具有多个类的字符串。我的问题是如何访问它???，下面给出了代码。

HTML CODE

<button id="view" class="cc btn btn-primary">View</button>

JS CODE

<script type="text/javascript">
$('button').click(
function()
{
$id=$(this).attr('id');
$class=$(this).attr('class');////////cc btn btn-primary but i want only `cc`
}
)
</script>

Answer 1

@nancy harigton，我通常使用的方法是将类拆分为数组，如下所示：https://jsfiddle.net/90dty5oo/8/

$('button').click(function() {
    var myClass= $(this).attr('class');

    myFirstClass = myClass.split(" ");

    alert(myFirstClass[0]);
});

您也不需要关于ID的函数内的第一行。

Answer 2

你几乎就在那里。

这个$(this).attr('class')返回一个包含整个类名的字符串。

另一种方法是使用此正则表达式/\s+/拆分类名并获取所需的类名。

使用此正则表达式/\s+/可以使用以下格式拆分类名：cc btn btn-primary，cc btn btn-primary或cc btn btn-primary，等等。

$('button').click(
  function() {
    //$id = $(this).attr('id');
    var classNames = $(this).attr('class').split(/\s+/);
    console.log(classNames)
    console.log(classNames.length ? classNames[0] : '');

    //Check is classname 'cc' exists.
    console.log(this.classList.contains('cc')); // Native attribute classList.        
    console.log($(this).hasClass('cc')); // jQuery function hasClass.
  }
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="view" class="cc      btn      btn-primary">Click this View</button>

从具有多个类的按钮获取类属性值

2 个答案: