Jquery如果元素有以x開頭的類，那麼不要添加類

我是一個明確的新手，所以對垃圾編碼表示歉意！我爲自己設定的練習項目編寫了以下jQuery：Jquery如果元素有以x開頭的類，那麼不要添加類

當您點擊div時，它添加了類「in_answerbox1」，並在類answerbox_letter1的answerbox中創建了一個克隆的div，添加。

最終會有一個網格許多申報單（或細胞的表），當你點擊一個特定的一個，它會淡出，似乎出現在answerbox。然後，當您單擊答案框中的內容時，網格中的相關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); 

} 


});

有什麼建議嗎？

來源

2013-04-23 Truvia

我覺得這個問題是如果條件：

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：

假設的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); 
    } 
});

看到這個example here。

你應該考慮使用data-attributes，他們會更可靠，然後classes爲你想要做的。

需要注意的是，如果你想選擇匹配只有class屬性開始一個字，你會想[class^="word"]。然而，*搜索整個班級屬性。要小心，[class^="word"]不會匹配<div class="test word">see here。

來源

2013-04-23 09:03:31 soyuka

這將試圖找到元素給定的選擇器在DOM樹中的當前元素下面，不包括當前元素。但OP想檢查給定類的當前元素 – devnull69 2013-04-23 09:06:15

感謝更正，誤讀了問題 – soyuka 2013-04-23 09:22:13

感謝您的提示！是的，我確實希望它檢查給定類的當前元素。 – Truvia 2013-04-23 12:13:32

使用.is()而不是.hasClass()。前者可以與CSS選擇器一起使用，而後者只能將類名稱用作「固定」字符串。

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

注：如果元素恰好這隻會持續工作一類

來源

2013-04-23 09:07:43 devnull69

你是怎麼說的？如果元素只有一個類，這隻會一致地工作。我做了一點[測試]（http://jsfiddle.net/qTyJU/1），但無法理解。 – soyuka 2013-04-23 10:00:35

如果你有多個類，當且僅當列表中的第一個類名以「answerbox」開始時，如果你有多個類，上述的.is（）的選擇器才能工作。如果您正在查找的類名不是第一個，那麼選擇器將無法正常工作 – devnull69 2013-04-23 11:02:53

好吧，現在我明白了，但它似乎可以與'* ='選擇器一起工作。 – soyuka 2013-04-23 11:58:30

如果你需要的東西，多類名的作品，看看這個

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-23 11:06:56 devnull69

謝謝你，我會看看我能否得到它的工作！ – Truvia 2013-04-23 12:11:53

Jquery如果元素有以x開頭的類，那麼不要添加類

回答

相關問題