Jquery 如果元素具有以 x 开头的类，则不要添加类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16165149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery If element has class which begins with x, then don't addClass
提问by Truvia
I'm a definite newbie, so apologies for rubbish coding! I've written the following Jquery for a practice project I set myself:
我是一个绝对的新手，所以为垃圾编码道歉！我为自己设定的练习项目编写了以下 Jquery：
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 时，它会添加“in_answerbox1”类，并在添加了“answerbox_letter1”类的 answerbox 中创建一个克隆的 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.
最终，网格（或表格中的单元格）中会有许多 div，当您单击某个特定的 div 时，它会淡出并似乎出现在答案框中。然后当您点击答案框中的事物时，网格中的相关 div 将重新出现，并且克隆将从答案框中删除。
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".
但是，我现在希望仅当我单击的内容不在答案框中时才添加该类：即，如果原始或克隆具有包含“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);
}
});
Any suggestions?
有什么建议？
回答by soyuka
I think the matter is in the if condition :
我认为问题在于 if 条件：
if(!$(this).hasClass('[class^="answerbox"]')) {
Try this :
尝试这个 ：
if(!$(this).is('[class*="answerbox"]')) {
//Finds element with no answerbox class
} else {
//The element has already an answerbox class
}
You should take a look at toggleClassand isjquery docs.
你应该看看toggleClass并且是jQuery的文档。
See this live fiddle example.
请参阅此现场小提琴示例。
Little tip : instead of n = (n + 1)you can do n++:).
小提示：而不是n = (n + 1)你可以做n++:)。
Edit:
编辑：
After reading again the question, I did a full working script:
再次阅读问题后，我做了一个完整的工作脚本：
Assuming the Htmlis :
假设Html是：
<div id="box">
<p>Answer1</p>
<p>Answer2</p>
<p>Answer3</p>
</div>
<div id="answerbox">
</div>
jQuery:
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);
}
});
See this example here.
You should consider using data-attributes, they'll be more reliable then classesfor what you're trying to do.
您应该考虑使用data-attributes，它们会比classes您尝试做的更可靠。
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.
请注意，如果您希望选择器仅在 class 属性以单词开头时才匹配，则您需要[class^="word"]. *但是搜索整个类属性。不过要小心，[class^="word"]不会匹配<div class="test word">看到这里。
回答by devnull69
Use .is()instead of .hasClass(). The former can be used with CSS selectors whereas the latter can only use class name as a "fixed" string.
使用.is()代替.hasClass()。前者可以与 CSS 选择器一起使用，而后者只能使用类名作为“固定”字符串。
if(!$(this).is('[class^="answerbox"]'))
NOTE: This will only work consistently if the element has exactly one class
注意：只有当元素只有一个类时，这才会一致地工作
回答by devnull69
If you need something that works for multiple class names, check this
如果您需要适用于多个类名的东西，请检查这个
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
}
回答by Hyman
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_'
}
