2015-06-05 81 views
1

我試圖用類'box'在單擊時切換三個類:'box','box black'和'box blue'在他們。有些東西並不完全符合我的設置。謝謝你的幫助!在jQuery中添加和刪除類的三種方式切換

$('.box').click(function() { 
    if ($(this).class == 'box') { 
     $(this).addClass('black'); 
    } else if ($(this).class == 'box black') { 
     $(this).removeClass('black'); 
     $(this).addClass('blue'); 
    } else if ($(this).class == 'box blue') { 
     $(this).removeClass('blue'); 
    } 
}); 
+3

ü se'.hasClass()'而不是'.class'來檢查元素是否具有該類。 –

+0

@DhavalMarthak使用.hasClass()而不是類它幾乎可以工作......我只是被卡在黑色上,並沒有變成藍色。 jsfiddle [here](http://jsfiddle.net/spencerlarry/mfgpehzp/)。 –

+0

這是因爲你的代碼總是會首先觸發'if'條件,並將addClass黑色添加到單擊的'div'! –

回答

2

您的元素始終具有類.box,因此它總是會觸發初始條件。嘗試添加輔助初始類是這樣的:DEMO

HTML

<div class="box none"></div> 

jQuery的

$('.box').click(function() { 
     if ($(this).hasClass('none')) { 
      $(this).removeClass('none'); 
      $(this).addClass('black'); 
     } else if ($(this).hasClass('black')) { 
      $(this).removeClass('black'); 
      $(this).addClass('blue'); 
     } else if ($(this).hasClass('blue')) { 
      $(this).removeClass('blue'); 
      $(this).addClass('none'); 
     } 
    }); 

CSS

.box { 
     border: solid 1px; 
     width: 100px; 
     height: 100px; 
     background: #fff; 
    } 

    .black { 
     background: #000; 
    } 
    .blue { 
     background: blue; 
    } 
0

嘗試

$('.box').click(function() { 
    if ($(this).hasClass('box')) { 
     if ($(this).hasClass('black')) { 
      $(this).removeClass('black').addClass('blue'); 
     } else if ($(this).hasClass('blue')) { 
      $(this).removeClass('blue'); 
     } else { 
      $(this).addClass('black'); 
     } 
    } 
}); 

首先,你檢查元素是class箱。如果是這樣,你在第二類(黑色,藍色和無類)之間切換。