Jquery如果element有以x开头的类,那么不要addClass

Question

我是一个明确的新手,所以为垃圾编码道歉!我为自己设定的练习项目编写了以下Jquery:

单击div时,它会添加"in_answerbox1"类,并在answerbox中创建克隆的div,并添加"answerbox_letter1"类.

最终网格中会有很多div(或表格中的单元格),当您点击某个特定的网格时,它会淡出并似乎出现在答案框中.然后,当您单击答案框中的内容时,网格中的相关div将重新出现,克隆将从答案框中删除.

但是,我现在只想添加类,如果我点击的东西不在答案框中:即,如果原始或克隆有一个包含"answerbox"的类.

我写了下面的内容,知道它不起作用,但它可以解释我想要的更好.

var n = 0;

$('#box').click(function(){

    if(!$(this).hasClass('*[class^="answerbox"]')) {

    $(this).addClass('in_answerbox' + (n+ 1) );

    $(this).clone().appendTo('#answerbox').addClass('answerbox_letter' + (n + 1));
    n = (n + 1);

}


});

有什么建议？

Answer 1

我认为问题是在if条件下:

if(!$(this).hasClass('[class^="answerbox"]')) {

试试这个 :

if(!$(this).is('[class*="answerbox"]')) {
    //Finds element with no answerbox class
} else {
    //The element has already an answerbox class
}

你应该看看toggleClass并且是 jquery docs.

看到这个实况小提琴的例子.

小提示:而不是n = (n + 1)你可以做n++:).

编辑:

在再次阅读问题后,我做了一个完整的工作脚本:

假设Html是:

<div id="box">
    <p>Answer1</p>
    <p>Answer2</p>
    <p>Answer3</p>
</div>

<div id="answerbox">

</div>

jQuery:

var n = 0;

$('#box p').on('click',function(e) {
    e.preventDefault();
    if(!$(this).is('[class*="answerbox"]')) {
        n++;
        $(this).addClass('in_answerbox' + n );
        $(this).clone().appendTo('#answerbox').addClass('answerbox_letter' + n); 
    }
});

在此处查看此示例.

您应该考虑使用数据属性,它们会比classes您尝试做的更可靠.

请注意,如果您希望选择器仅在class属性以单词开头时匹配,那么您需要[class^="word"].*但是搜索整个类属性.但要小心,[class^="word"]不要匹配,<div class="test word"> 请看这里.

Answer 2

使用.is()代替.hasClass()。前者可以与 CSS 选择器一起使用，而后者只能使用类名作为“固定”字符串。

if(!$(this).is('[class^="answerbox"]'))

注意：只有当元素只有一个类时，这才会一致地工作