jQuery onclick來更改元素的類名稱

我有一個背景圖像的div，例如，它的類是image1。jQuery onclick來更改元素的類名稱

我有3個圖標，在頁面加載image1是在屏幕上。點擊我的第二個圖標時，我希望div的類更改爲image2，因此會顯示不同的背景圖像，如果單擊第三個圖標，則會更改爲圖像3.

我可以使用remove /在jQuery中添加類來刪除「image1」，但它可能在image2等。所以我會告訴它刪除「image1」和「image2」並添加「image3」，以及在這種情況下會發生什麼，因爲只有我會告訴它刪除的兩個類中有一個實際存在，會導致錯誤嗎？

這是正確的做法嗎？

<div id="fullbg" class="image1></div> 
<a class="img1link" href="#">show image 1</a> 
<a class="img2link" href="#">show image 2</a> 
<a class="img3link" href="#">show image 3</a> 

$('.img1link').click(function() { 
    $(#fullbg).removeClass('image2 image3'); 
    $(#fullbg).addClass('image1'); 
}); 

$('.img2link').click(function() { 
    $(#fullbg).removeClass('image1 image3'); 
    $(#fullbg).addClass('image2'); 
}); 

$('.img3link').click(function() { 
    $(#fullbg).removeClass('image1 image2'); 
    $(#fullbg).addClass('image3'); 
});

來源

2014-11-02 Adrian

你只是忘了添加引號。 '$（＃fullbg）'應該是'$（'＃fullbg'）' – 2014-11-02 22:14:29

既然你只使用一個類有，更好的是要做到：

$(#fullbg).attr('class', 'image3');

來源

2014-11-02 22:15:07 skobaljic

這就排除了在對象上使用其他類的任何其他類，例如CSS格式。我不會說這「更好」。 – jfriend00 2014-11-02 22:15:29

他在示例中沒有使用任何其他類，所以速度更快，執行的代碼更少，因此「更好」更好。 – skobaljic 2014-11-02 22:16:41

而且，靈活性更低，更脆弱，因爲如果某些前端工程師決定添加一個類來幫助CSS格式化，那麼事情就會中斷。在'.click（）'類型函數中，性能不是問題。建議不要使用其他類進行格式化，這不是一個推薦的解決方案。 – jfriend00 2014-11-02 22:21:40

列出一堆要移除的類是完全正確的。它只會刪除那些存在的而不會導致任何錯誤。這是一種可以接受的方式來做你想做的事情。

僅供參考，這就是鏈接可以簡化你的代碼有點太的地方：

$("#fullbg").removeClass('image2 image3').addClass('image1');

既然你在當前的實施有很多複製的代碼，它可能會更好的DRY了整個實現只用一個共同的事件處理程序：

$("#fullbg a").click(function() { 
    var num = $(this).index() + 1; 
    $("#fullbg").removeClass('image1 image2 image3').addClass('image' + num); 
});

來源

2014-11-02 22:13:21 jfriend00

如果您不需要用於樣式設計的任何類，則可以使用不帶任何參數的函數.removeClass（）。在這種情況下，所有的類都被刪除了，你不必傳遞所有可能的類。

來源

2014-11-02 22:19:11

您可以將函數傳遞給removeClass。以下是任何數量圖片的通用工作示例。

$("#fullbg").removeClass(function() { 
    classNames = ""; 
    for(var i = 0; i < images.length; ++i) { 
     classNames += "image" + (i+1) + " "; 
    } 
    return classNames; 
}).addClass("image1");

內部函數創建字符串image1 image2 image3 ...來刪除它們。

來源

2014-11-02 22:22:28

jQuery onclick來更改元素的類名稱

回答

相關問題