使用jquery / javascript切換div的css屬性

Question

我正在嘗試編寫代碼，在其中可以切換div的CSS屬性。 基本上，我試圖創建一個具有正常狀態和活動狀態的按鈕。

它的正常顏色是藍色，但是一旦單擊它，它就會變成綠色。 再次單擊它，它變回藍色。

CSS：

    .lblue{
        -moz-border-radius: 3px;
        border-radius: 3px;
        box-shadow: 0 1px 2px #fff, /*bottom external highlight*/
          0 -1px 1px #666, /*top external shadow*/ 
          inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
          inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
        font-size: 16pt;
        padding: 5px;
        margin: 5px;
        color: white;
        background: #4bc2d3; /* Old browsers */
        background: -moz-linear-gradient(top,  #4bc2d3 0%, #70d6e2 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4bc2d3), color-stop(100%,#70d6e2)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #4bc2d3 0%,#70d6e2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bc2d3', endColorstr='#70d6e2',GradientType=0 ); /* IE6-9 */
        font-family: OpenSans-Semibold;
        float: left;
        }


        .lgreen{
            -moz-border-radius: 3px;
            border-radius: 3px;
            box-shadow: 0 1px 2px #fff, /*bottom external highlight*/
              0 -1px 1px #666, /*top external shadow*/ 
              inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
              inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
            font-size: 16pt;
            padding: 5px;
            margin: 5px;
            color: white;
            background: #7ebb44; /* Old browsers */
            background: -moz-linear-gradient(top,  #7ebb44 0%, #a5d063 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7ebb44), color-stop(100%,#a5d063)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #7ebb44 0%,#a5d063 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ebb44', endColorstr='#a5d063',GradientType=0 ); /* IE6-9 */
            font-family: OpenSans-Semibold;
            float: left;
            }

HTML：

 <div class="lblue">Soul</div> 

JS：

        $('.lblue').click(function() {
          $('.lblue').toggle(function() {
            $('.lblue').addClass('lgreen');

          });
        });

我的代碼的問題是，由於某種原因，當我單擊按鈕時，按鈕消失了，好像它正在滑出一樣。

Answer 1

http://api.jquery.com/toggle/

切換方法在每次調用時顯示/隱藏元素。

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});

Answer 2

我不同意其他答案。 即使它們是正確的，但它們在語義上似乎也不正確，元素的類將同時包含lblue和lgreen類名：

<div class="lblue lgreen">Soul</div>
            ^^^^^^^^^^^^-- this is bad

並且它們將依賴於在CSS中定義的類名的順序。

避免將來出現問題，並對所見內容和DOM中的內容使用語義上正確的方法：

$(document).on("click", ".lblue, .lgreen", function(){
  $(this).toggleClass("lblue lgreen");
});​

如果所有元素的初始狀態均為藍色，則：

$(".lblue").click(function(){
  $(this).toggleClass("lblue lgreen");
});​

前者適用於動態添加的元素，后者則不行。

看看這個。

Answer 3

您使用的.toggle()錯誤。

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});

Answer 4

使用普通的javascript，您可以使用classList切換https://developer.mozilla.org/en-US/docs/DOM/element.classList

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
alert(div.classList.contains("foo"));

在您的情況下：（假設僅要修改一個元素；另請參見querySelectorAll和getElementsByClassName）

document.querySelector('.lblue').classList.toggle('lgreen');

由於它是一項相當新的功能，請參見： http : //caniuse.com/classlist以了解瀏覽器兼容性

Answer 5

我想您可以檢查顏色並執行事件。

例如。）

如您的情況：初始顏色=藍色。 變換的顏色=綠色

$('button handler').click(function () {
  if($(this).css('background-color') == 'BLUE') { 
    $(this).css('background-color', 'GREEN'); 
  } else { 
    $(this).css('background-color', 'BLUE'); 
  }
});

只是我的猜測。 我真的不知道您要尋找什么。