jQuery如果element具有以x开头的类，则不要addClass [英] Jquery If element has class which begins with x, then don't addClass

问题描述

我绝对是新手，所以对垃圾编码表示歉意！ 我为自己设定的一个练习项目编写了以下Jquery:

I'm a definite newbie, so apologies for rubbish coding! I've written the following Jquery for a practice project I set myself:

当您单击div时，它添加了"in_answerbox1"类，并在answerbox中创建了一个克隆的div，并添加了"answerbox_letter1"类.

When you click on the div, it has the class "in_answerbox1" added and a cloned div is created in the answerbox with the class "answerbox_letter1" added.

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

Eventually there will be many divs in a grid (or cells in a table) that when you click on a particular one, it will fade out and seem to appear in the answerbox. Then when you click on the thing in the answerbox,the relevant div in the grid will reappear and the clone will be removed from the answerbox.

但是，我现在仅希望在我单击的内容尚未在答案框中时添加该类:即，如果原始对象或克隆对象中的某个类都包含"answerbox".

However, I now want the class to be added ONLY if the thing I'm clicking on is not already in the answerbox: i.e. if either the original or the clone has a class which contains "answerbox".

我写了以下内容，知道它是行不通的，但是它可以解释我想要的更好的东西.

I wrote the following knowing it wouldn't work but that it might explain what I want better.

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

}


});

有什么建议吗?

推荐答案

我认为这是在if条件下:

I think the matter is in the if condition :

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 和

You should take a look at toggleClass and is jquery docs.

请参见以下实时小提琴示例.

小技巧:您可以使用n++代替n = (n + 1):).

Little tip : instead of n = (n + 1) you can do n++ :).

编辑:

再次阅读问题后，我做了 完整的工作脚本 :

After reading again the question, I did a full working script :

假设 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尝试执行的操作.

You should consider using data-attributes, they'll be more reliable then classes for what you're trying to do.

请注意，如果您希望选择器仅在class属性以单词开头时匹配，则需要[class^="word"].但是，*会搜索整个class属性. 不过请注意，[class^="word"]与<div class="test word"> 请参见此处不匹配.

Note that if you want the selector to match only if the class attribute begins with a word, you'll want [class^="word"]. * however searches through the whole class attribute. Be careful though, [class^="word"] will not match <div class="test word"> see here.

这篇关于jQuery如果element具有以x开头的类，则不要addClass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！