按鈕更改顏色

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>moockup< /title> 
     <style> 
      .yellowBackground { 
       background-color: yellow; 
      } 

      .redBackground { 
       background-color: red; 
      } 
     </style> 
    </head> 

    <body> 
     <button id="button" class="yellowBackground" id="thumb" >paina tästä< /button> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script> 
      $(function() { 
       $("#button").click(function() { 
        changeThumb(); 
       }); 
      }); 
      function changeThumb() { 
       $("#thumb").toggleClass("yellowBackground redBackground"); 
      } 
     </script> 
    </body> 
</html>

爲什麼這不起作用我想按下該按鈕，它必須在每次點擊後將其顏色更改爲黃色和紅色，我知道如何使用JavaScript，但我現在正在學習jQuery。按鈕更改顏色

來源

2015-08-28 waleedd32

你有你的按鈕標記兩個ID .... –

啊哈我不能這樣做呢？好吧，我現在要做什麼？ – waleedd32

這裏是一個解決方案的人：http://jsfiddle.net/leojavier/9psL0oa0/

<button class="yellowBackground" id="thumb" >test</button>

CSS

.yellowBackground { 

background-color: yellow; 
} 

.redBackground { 

background-color: red; 
}

$("#thumb").click(function() { 

    $("#thumb").toggleClass("redBackground"); 

});

來源

2015-08-28 18:35:39

希望這可以幫助... :) –

toggleClass方法使您想要添加和刪除的類名...默認情況下分配一個類，並且切換類應該覆蓋默認類 –

每個應該只有一個ID屬性標籤，並且它在整個文檔中應該是唯一的 –

希望這會回答你的問題。小提琴[http://jsfiddle.net/57vss22x/3/]

jQuery的

$(".place").click(function() { 
$(this).toggleClass("green"); 
});

CSS

.place { background-color: yellow; } 
.place.green { background-color: red; }

HTML

<button id="button" class="place" id="thumb" >paina tästä</button>

來源

2015-08-28 18:37:15 Henry

你不能有一個元素的多個id屬性。

$("#button").click(function() { 
 
    changeThumb(); 
 
}); 
 
function changeThumb() { 
 
    $("#button").toggleClass("yellowBackground redBackground"); 
 
}

.yellowBackground { 
 
    background-color: yellow; 
 
} 
 
.redBackground { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<button id="button" class="yellowBackground">paina tästä</button>

來源

2015-08-28 18:37:19 RRK

也謝謝你！ – waleedd32

按鈕更改顏色

回答

相關問題