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和is jquery文档。

请参阅此live fiddle example。

小提示：代替n = (n + 1)，您可以n++：）。

修改：

再次阅读问题之后，我做了一个 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); 
    }
});

请参阅此example here。

您应该考虑使用data-attributes，它们会比classes更可靠，因为您正在尝试做什么。

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

Answer 2

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

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

注意：如果元素只有一个类

，这只会一致地工作

Answer 3

如果您需要适用于多个类名的内容，请查看

var theClasses = $(this).attr('class').split(" ");
var i=0;
var found = false;
while(i<theClasses.length && !found) {
   if(theClasses[i].indexOf('answerbox') == 0) {   // starts with answerbox
      found = true;
   }
   i++;
}
if(!found) {
   // the current element does not have a class starting with answerbox
}

Answer 4

如果您的元素在同一元素上有多个类，则其他答案不起作用。您需要这样选择它：

if ( $(this).is('[class^="bleh_"], [class*=" bleh_"]') ) {

    // Return true if element has class that starts with "bleh_"

    // Note: The second argument has a space before 'bleh_'

}

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

4 个答案: