Javascript更改類兩次

我寫了下面的代碼，當你點擊鏈接時，整個樣式將被改變。Javascript更改類兩次

$(".buybuttons").click(function() { 
 
    $(".buybuttons").removeClass().addClass('buybuttonsclick'); 
 
});

.buybuttons { 
 
    background-color:#000000; 
 
    text-align:center; 
 
    padding:10px; 
 
} 
 

 
.buybuttonsclick { 
 
    background-color:#ff0000; 
 
    text-align:right; 
 
    padding:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<a href="#" class="buybuttons">Click To Change</a>

的問題是，我怎麼可以把一個反向的呢？！

我的意思是當我再次點擊時，它會更改爲第一種樣式（buybuttons）。

來源

2017-07-28 Arash EB

的'click'處理器給自己'.buybuttons'在你的代碼運行的時間。如果你刪除了這個班級，那麼這個任務仍然存在。在你的處理程序中添加一個'console.log'，你會看到代碼在你再次點擊它時運行，即使這個類已經被刪除了。如果你*不想*這種行爲，那麼使用事件委託。 –

您可以使用'toggleClass'。有關更多詳細信息，請通過提及鏈接[toggleClass]（http://api.jquery.com/toggleclass/） –

toggleClass()怎麼樣？

$(".buybuttons").click(function() { 
 
    $(this).toggleClass('buybuttonsclick'); 
 
});

.buybuttons { 
 
    background-color:#000000; 
 
    text-align:center; 
 
    padding:10px; 
 
} 
 

 
.buybuttonsclick { 
 
    background-color:#ff0000; 
 
    text-align:right; 
 
    padding:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<a href="#" class="buybuttons">Click To Change</a>

來源

2017-07-28 11:30:12

@guradio無需切換'buybuttons'類，因爲反正它被'buybuttonsclick'類覆蓋。但是，如果我們換掉職位，這將無法正常工作。 –

你是正確的我不知道風格將被重寫，當添加另一個我不知道風格將被用於哪個類的優先級。 – guradio

使用jQuery toggleClass()功能，它add或remove一個或從該組中匹配的元素，這取決於任一類的存在或狀態的參數的值的每一個元素更classes。你可以發現機制的文檔JQuery toggleClass()

$(".buybuttons").click(function() { 
 
    $(this).toggleClass('buybuttonsclick'); 
 
});

.buybuttons { 
 
    background-color:#000000; 
 
    text-align:center; 
 
    padding:10px; 
 
} 
 

 
.buybuttonsclick { 
 
    background-color:#ff0000; 
 
    text-align:right; 
 
    padding:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<a href="#" class="buybuttons">Click To Change</a>

$(".buybuttons").click(function() { 
    $(".buybuttons").toggleClass('buybuttonsclick'); 
});

來源

2017-07-28 11:30:15

因爲當你刪除類點擊事件沒有發生。
在錨上添加另一個類，然後在click事件中使用它。
使用toggleClass（）

$(".anchorclass").click(function() { 
 
    $(this).toggleClass('buybuttonsclick buybuttons'); 
 
});

.buybuttons { 
 
    background-color:#000000; 
 
    text-align:center; 
 
    padding:10px; 
 
} 
 

 
.buybuttonsclick { 
 
    background-color:#ff0000; 
 
    text-align:right; 
 
    padding:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<a href="#" class="buybuttons anchorclass">Click To Change</a>

來源

2017-07-28 11:32:22 guradio

您更改類兩次，然後用toggelclass

$(".buybuttons").click(function() { 
 
    $(".buybuttons").toggleClass('buybuttonsclick'); 
 
});

.buybuttons { 
 
    background-color:#000000; 
 
    text-align:center; 
 
    padding:10px; 
 
} 
 

 
.buybuttonsclick { 
 
    background-color:#ff0000; 
 
    text-align:right; 
 
    padding:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<a href="#" class="buybuttons">Click To Change</a>

來源

2017-07-28 11:33:58 Bhargav

我看到這個答案4分鐘前與3 upvote – guradio

雅兄弟，但那時我解決問題之前，我回答，已經有答案@guradio – Bhargav

您可以選擇toggleClass()而不是刪除和添加類。只是一點點改變..

$(".buybuttons").click(function() { 
    $(".buybuttons").toggleClass('buybuttonsclick'); 
});

無論如何，我希望你有你的答案。有點晚回答。

來源

2017-07-28 11:35:39 soverflow77

或者如果你想始終保持任何類

$(".buybuttons, .buybuttonsclick").click(function() { 
    $(this).toggleClass('buybuttonsclick'); 
    $(this).toggleClass('buybuttons'); 
});

來源

2017-07-28 11:39:16

Javascript更改類兩次

回答

相關問題