20

我是一个绝对的新手，所以为垃圾编码道歉！我为自己设置的练习项目编写了以下 Jquery：

当您单击 div 时，它添加了类“in_answerbox1”，并在添加了类“answerbox_letter1”的答案框中创建了一个克隆的 div。

最终，网格（或表格中的单元格）中会有许多 div，当您单击特定的一个时，它会淡出并似乎出现在答案框中。然后当你点击答案框中的东西时，网格中的相关div会重新出现，并且克隆会从答案框中删除。

但是，我现在希望仅当我单击的内容尚未在答案框中时才添加该类：即，如果原始或克隆具有包含“答案框”的类。

我写了以下内容，知道它不会起作用，但它可能会更好地解释我想要什么。

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

}


});

有什么建议么？

4

4 回答 4

41

我认为问题在于 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); 
    }
});

在此处查看此示例。

您应该考虑使用data-attributes，它们会比classes您尝试做的更可靠。

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

于 2013-04-23T09:03:31.137 回答
5

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

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

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

于 2013-04-23T09:07:43.817 回答
3

The other answers do not work if your element has multiple classes on the same element. You need to select it as such:

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_'

}
于 2019-01-04T17:49:19.257 回答
2

如果您需要适用于多个类名的东西，请检查此

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
}
于 2013-04-23T11:06:56.870 回答