JQuery Если элемент имеет класс, начинающийся с x, то не добавляйте class

Я - новичок, поэтому извиняюсь за кодирование мусора! Я написал следующий JQuery для практического проекта, который я задал себе:

Когда вы нажимаете на div, он добавляет класс "in_answerbox1" и клонированный div создается в ответном поле с добавленным классом "answerbox_letter1".

В конце концов в сетке (или ячейках в таблице) будет много divs, которые, когда вы нажмете на какой-либо конкретный, будут исчезать и, как представляется, появятся в окне ответа. Затем, когда вы нажимаете на предмет в ответном поле, соответствующий 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);

}


});

Любые предложения?

Ответ 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 docs.

Смотрите пример живой скрипки.

Маленький совет: вместо n = (n + 1) вы можете сделать n++:).

Изменить:

Снова прочитав вопрос, я сделал полную работу 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); 
    }
});

Смотрите здесь здесь.

Вы должны использовать data-attributes, они будут более надежными, чем classes за то, что вы пытаетесь сделать.

Обратите внимание, что если вы хотите, чтобы селектор совпадал, только если атрибут класса начинается со слова, вам нужно [class^="word"]. * однако выполняет поиск по всему атрибуту класса. Будьте осторожны, но [class^="word"] не будет соответствовать <div class="test word"> см. Здесь.

Ответ 2

Используйте .is() вместо .hasClass(). Первый может использоваться с селекторами CSS, тогда как последний может использовать только имя класса как "фиксированную" строку.

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

ПРИМЕЧАНИЕ. Это будет работать только последовательно, если элемент имеет ровно один класс

Ответ 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
}