切換使用jQuery/JavaScript的

我試圖寫代碼，我可以切換一個div的CSS屬性div的CSS屬性。基本上我試圖創建一個具有正常狀態和活動狀態的按鈕。切換使用jQuery/JavaScript的

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

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'); 

      }); 
     });

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

來源

2012-12-16 itsover9000

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

切換方法顯示/隱藏在每個呼叫的元件。

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

來源

2012-12-16 12:01:07

在回調中使用'$（this）'，否則可能會遇到問題。 – bobthyasian

是的，我的壞，謝謝。 –

沒問題。我收回我的-1 :) – bobthyasian

您錯誤地使用了.toggle()。

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

來源

2012-12-16 12:03:59 bobthyasian

用普通的JavaScript，你可以使用班級列表切換 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瀏覽器兼容性

來源

2012-12-16 12:04:27 neo

我很欣賞這個簡單的Javascript解決方案，但是：爲什麼不使用OP提到的類？另外，你應該陳述一些關於瀏覽器支持的內容 – Christoph

編輯按照您的建議。 – neo

現在已經很好了，我已經+1了;） – Christoph

我不能同意其餘的答案。即使他們是正確的他們似乎不被語義正確，元素的類將同時包含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"); 
});

的前者將用於動態添加元素，後者不會。

Check it out.

來源

2012-12-16 12:19:15 Alexander

@亞歷山大「這絕不會產生一個青色的元素」有很多方法可以使這種說法錯誤，即：定義'lgreen'類後'lblue '在CSS中使用或使用'！important'。如果css結構合理，我認爲'切換'解決方案更清潔。 – nienn

@nienn，不正確。但是，我同意。我會減少我的諷刺並將它清理一下 – Alexander

@ Alexander，因爲你重新編輯了你的文章，我的評論沒有什麼意義了=）。你的後一種解決方案更清潔如果你保持一個結構良好的CSS，我仍然認爲你可以保持這兩個階級的思想。這允許你重新使用lgreen類中的屬性（在這個具體的例子中，我認爲包含顏色名稱的類可以使它不直觀）。 – nienn

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

EG。）

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

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

只是我的猜測。我真的不知道你到底在找什麼。

來源

2012-12-16 13:15:18

切換使用jQuery/JavaScript的

回答

相關問題