Jquery यदि तत्व में कक्षा है जो एक्स के साथ शुरू होता है, तो addClass

Question

नहीं जोड़ें मैं एक निश्चित नौसिखिया हूं, इसलिए कचरा कोडिंग के लिए क्षमा चाहते हैं! मैंने एक प्रोजेक्ट प्रोजेक्ट के लिए निम्नलिखित Jquery लिखा है, मैंने खुद को सेट किया है:

जब आप div पर क्लिक करते हैं, तो इसमें "in_answerbox1" वर्ग जोड़ा जाता है और क्लास "answerbox_letter1" श्रेणी के साथ उत्तर बॉक्स में क्लोन div बनाया जाता है। जोड़ा।

आखिरकार ग्रिड (या तालिका में सेल्स) में कई divs होंगे, जब आप किसी विशेष पर क्लिक करेंगे, तो यह फीका होगा और उत्तरबॉक्स में दिखाई देगा। फिर जब आप उत्तर बॉक्स में चीज़ पर क्लिक करते हैं, तो ग्रिड में प्रासंगिक 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(!$(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 किया

<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^="word"] चाहता हूँ। * हालांकि पूरे वर्ग विशेषता के माध्यम से खोज करता है। सावधान रहें, [class^="word"]<div class="test word">see here से मेल नहीं खाएगा।

Answer 2

.hasClass() के बजाय .is() का उपयोग करें। पूर्व का उपयोग सीएसएस चयनकर्ताओं के साथ किया जा सकता है जबकि उत्तरार्द्ध केवल वर्ग नाम को "निश्चित" स्ट्रिंग के रूप में उपयोग कर सकता है।

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 
}