jQuery: hasClass partial match

Question

При использовании Attribute Contains Word Selector следует ли оценивать значение true? Я пытаюсь использовать его в выражении if/else, как показано ниже, и не оценивает true.

<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

Answer 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")){ 

Answer 2

Вы забыли, что вы используете «Атрибут содержит Word Селектор« Итак, для этого селектора вам нужно использовать [class~='blue']. Вы не можете использовать [class~='bl'], потому что атрибут класса не содержит слова «bl», а слово «синий».

Способ использовать этот селектор:

$("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") 
    }; 
});