jQuery：hasClass 部分匹配答案

【问题标题】：jQuery: hasClass partial matchjQuery：hasClass 部分匹配
【发布时间】：2015-11-06 20:22:54
【问题描述】：

当使用Attribute Contains Word Selector 时，它应该评估为真吗？我正在尝试在下面的 if/else 语句中使用它，但它的评估结果不正确。

<li class="orange blue">
    <div class="answer">Some Content</div>
</li>
<input type="button" name="yellow" value="yellow" class="yellow" />
<br />
<input type="text" value="" class="result" />

$("input.yellow").click(function() {
    if ( $("div.answer").parent().hasClass($("[class~='bl']")) == true ){
        $("input.result").val("has class");
    } else {
        $("div.answer").parent().addClass("blue");
        $("input.result").val("class added")
    };
});

The fiddle

【问题讨论】：

呃，hasClass 需要一个字符串。你给它一个 jQuery 对象。
您可以考虑使用 filter().length 代替。或者是（）。 .is("[class~='bl']")
哦，谢谢，我会试试的。我是 jQuery/javascript 的新手。
在这种情况下，我可能还会评论 hasClass() 和 is() 都返回布尔值 true/false，因此没有必要这样做 == true

标签： javascript jquery attributes selector word

【解决方案1】：

正如评论所建议的，hasClass 接受string。所以你可以使用is:-

if ( $("div.answer").parent().is($("[class~='bl']"))){

或者你可以创建一个小的 jquery 插件：-

$.fn.hasPartialClass = function(partial){
  return new RegExp(partial).test(this.prop('class')); 
};

并像这样使用：-

if ( $("div.answer").parent().hasPartialClass("bl")){

【讨论】：

【解决方案2】：

您忘记了您正在使用“属性包含 Word 选择器” 所以要让这个选择器匹配你必须使用[class~='blue']。您不能使用[class~='bl']，因为类属性不包含单词“bl”，而是包含单词“blue”。

这个选择器的使用方法：

    $("input.yellow").click(function() {
    if ( $("div.answer").parent().is("[class~='blue']") ){
        $("input.result").val("has class");
    } else {
        $("div.answer").parent().addClass("blue");
        $("input.result").val("class added")
    };
});

【讨论】：