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

【问题标题】：getting the class attribute value from button having multiple classes从具有多个类的按钮获取类属性值
【发布时间】：2018-03-25 21:49:29
【问题描述】：

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

HTML 代码

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

JS代码

<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>

【问题讨论】：

它按预期工作！
Get the "class" attribute of an object split into an array of strings的可能重复

标签： javascript jquery

【解决方案1】：

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

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

    myFirstClass = myClass.split(" ");

    alert(myFirstClass[0]);
});

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

【讨论】：

@allenski, ya 它正在工作，但问题是如何访问它？它是一个数组吗？它正在显示一个字符串.....
@nancy，你只需要其中一门课吗？或全部
我只想要 cc 类字符串用于 attr 比较
拆分成一个数组。我已经为你更新了我的答案:)

【解决方案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>

【讨论】：