Jquery Se l'elemento ha una classe che inizia con x, allora non aggiungereClass

Question

Sono un principiante, quindi scuse per la codifica dei rifiuti! Ho scritto il seguente Jquery per un progetto di pratica mi sono posto:

Quando si fa clic sul div, ha la classe di "in_answerbox1" aggiunto e un div clonato è creato nella answerbox con la classe "answerbox_letter1" aggiunto.

Eventualmente ci saranno molti div in una griglia (o celle in una tabella) che quando si fa clic su un particolare, si dissolvono e sembrano apparire nella casella di risposta. Quindi quando si fa clic sulla cosa nella casella di risposta, riappare il relativo div nella griglia e il clone verrà rimosso dalla casella di risposta.

Tuttavia, ora voglio la classe per essere aggiunto solo se la cosa che sto facendo clic su non è già nella answerbox: vale a dire, se l'originale o il clone ha una classe che contiene "answerbox".

Ho scritto quanto segue sapendo che non avrebbe funzionato ma che avrebbe potuto spiegare cosa volevo di meglio.

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

} 


}); 

Qualche suggerimento?

Answer 1

Credo che la questione è nella condizione di se:

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

Prova questa:

if(!$(this).is('[class*="answerbox"]')) { 
    //Finds element with no answerbox class 
} else { 
    //The element has already an answerbox class 
} 

si dovrebbe dare un'occhiata a toggleClass e is docs jQuery.

Vedere questo live fiddle example.

Piccolo consiglio: invece di n = (n + 1) puoi fare n++ :).

Edit:

Dopo aver letto di nuovo la domanda, ho fatto un full working script:

Supponendo che il 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); 
    } 
}); 

Vedere questo example here.

Si dovrebbe considerare l'utilizzo di data-attributes, saranno più affidabili quindi classes per ciò che si sta tentando di fare.

---

Si noti che se si desidera che il selettore per abbinare solo se l'attributo di classe inizia con una parola, si vorrà [class^="word"]. * tuttavia esegue la ricerca attraverso l'intero attributo di classe. Attenzione però, [class^="word"] non corrisponde a <div class="test word">see here.

Answer 2

Utilizzare .is() anziché .hasClass(). Il primo può essere usato con selettori CSS, mentre il secondo può usare solo il nome di classe come stringa "fissa".

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

NOTA: Questo funziona solo in modo coerente se l'elemento ha esattamente una classe

Answer 3

Se avete bisogno di qualcosa che funziona per i nomi delle classi più, controllare questo

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 
}