button.js中的按鈕背景顏色

Question

所以我試圖編輯單擊按鈕時的顏色。 這裏是我的HTML和JavaScript

HTML：

<button type="submit" class="btn" id="hello-1" value="hello">Submit</button> 

這裏是我的JS：

//Name:buttons.js 
//Created by: Jonathan 
//Created on: 25/09/15. 

'use stict'; 

$(document).ready(function(){ 
    $('hello-1').click(function(){ 
     document.getElementById('hello-1').style.background = "linear-gradient(#337AB7,#215480)"; 
    }); 
}); 

我不明白爲什麼它不工作。任何幫助？

Answer 1

您的選擇是錯誤的。當您通過編號jQuery選擇了一個元素時，您必須在ID之前添加#字符。

所以不是$('hello-1')使用$('#hello-1')

$(document).ready(function() { 
    $('#hello-1').click(function() { 
     document.getElementById('hello-1').style.background = "linear-gradient(#337AB7,#215480)"; 
    }); 
}); 

---

編輯：

而且當你單擊事件處理程序中，你不需要再次選擇元素，因爲this將指向您的事件處理程序的目標元素可以如下所示：

$(document).ready(function() { 
    $('hello-1').click(function() { 
     this.style.background = "linear-gradient(#337AB7,#215480)"; 
    }); 
}); 

Answer 2

如果你使用jQuery，爲什麼不用它來改變css？你也錯過了＃。

$(document).ready(function(){ 
    var $button = $('#hello-1'); 
    $button.click(function(){ 
     $button.css('background', "linear-gradient(#337AB7,#215480)"); 
    }); 
});