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选择了元素，则必须在ID之前添加#字符。

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

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

编辑：

此外，当您在click事件处理程序中时，您不需要再次选择该元素，因为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)");
   });
});

button.js中的按钮背景颜色

2 个答案: