添加/刪除元素上的最新應用類

-1

我有下面的代碼片段，當我單擊不同的元素時，它可以正常工作，但只要單擊我沒有任何更改之前單擊的圖像。添加/刪除元素上的最新應用類

下面是代碼：

$("img").on('click', function() { 
     var $body = $("body"); 
     if($(this).data('color') == 'black') { 
      $body.addClass("black"); 
     } 
     if($(this).data('color') == 'blue') { 
      $body.addClass("blue"); 
     } 
     if($(this).data('color') == 'silver') { 
      $body.addClass("silver"); 
     } 
     if($(this).data('color') == 'white') { 
      $body.addClass("white"); 
     } 
     if($(this).data('color') == 'yellow') { 
      $body.addClass("yellow"); 
     } 
     });

所以現在我想刪除，以追加新的最新應用類。有沒有辦法用jQuery來做到這一點？還是有比我想的更簡單的解決方案？

謝謝你的幫助。

UPDATE：

Body早已類所以removeClass（）是不正確的方法，因爲這些的都將丟失！

來源

2013-05-07 giokokos

'$（「身體」） .addClass（$（this）.data（「color」））;'< - 更簡單的方法。 – 2013-05-07 20:50:04

下面將增加與點擊圖像，相關的類或刪除該類如果它已經存在：

$("img").on('click', function() { 
    $("body").toggleClass($(this).data("color")); 
});

，或者確保身體只有一次一個類，並消除目前的一個，如果相同的圖像被點擊了兩次：

$("img").on('click', function() { 
    var $body = $("body"), 
     newColor = $(this).data("color"); 
    if ($body.hasClass(newColor)) 
     $body.removeClass(); 
    else 
     $body.removeClass().addClass(newColor); 
});

...但當然調用removeClass()沒有PARAMS將刪除所有類，甚至是那些沒有與顏色相關聯的，所以也許：

$("img").on('click', function() { 
    var $body = $("body"), 
     currentColor = $body.data("currentColor"), 
     newColor = $(this).data("color"); 

    $body.removeClass(currentColor); 

    if (currentColor === newColor) 
     $body.data("currentColor","none"); 
    else 
     $body.addClass(newColor).data("currentColor", newColor); 
});

來源

2013-05-07 20:51:41 nnnnnn

第三個代碼片段訣竅！謝謝！ :) – giokokos 2013-05-07 21:04:37

你可以嘗試刪除最後一個「字」使用正則表達式：

var newClass = $body.attr("class").replace(/(^|\s+)\b\w*\b\s*$/,""); 
$body.attr("class", newClass);

我這個問題的解釋是，你要刪除的最後添加類無論哪個類是的。 ..因此正則表達式處理任何字符串。

toggleClass方法只切換一個類（因此它建立了多種顏色的類，例如"blue black yellow"），但如果這是你想要的，它肯定會比正則表達式更好地工作（它不會工作在所有）。

來源

2013-05-07 20:52:11

您需要刪除添加到身體任何以前的類，然後添加新的：

$("img").on('click', function() { 
    $("body").removeClass().addClass($(this).data("color")); 
}

來源

2013-05-07 20:57:21

這將刪除最近添加的類：

class = $("body").attr('class').split(' '); 
class.pop(); 
$("body").attr('class', class.join(' '));

來源

2013-05-07 20:57:48 dave

很高興知道！謝謝您的回答。 – giokokos 2013-05-07 21:05:14

添加/刪除元素上的最新應用類

回答

相關問題