javascript - 如何更改按钮背景颜色，因为有很多按钮

Question

我创建了很多 HTML 按钮，当用户按下它时，它应该改变背景颜色或做一些事情让用户知道它。但是，我一开始并没有创建该事件。

现在我有麻烦了，我应该在每个触发事件中添加很多指令来改变颜色，还是我有一些更方便的其他简单方法。

我想创建一个接收 的公共函数button id，用它来控制应该突出显示哪个按钮。不过，我不知道如何获得这样的按钮 ID：

$("#upload").bind("click", function(){

 //I want to get the string 'upload'
 })

还有更方便的方法吗？我不想为许多按钮添加大量指令。

Answer 1

this事件处理程序内部的方法将引用单击的按钮，因此您可以使用this.id.

var buttons = $(":button").bind("click", function(){
    buttons.not(this).css('background-color', '')
    $(this).css('background-color', 'blue')
})

这会将单击按钮的背景更改为蓝色

演示：小提琴

但我可能更喜欢使用 css 类来做到这一点

button {
    background-color: lightgrey;
}

button.active {
    background-color: blue;
}

var buttons = $(":button").bind("click", function(){
    buttons.filter('.active').removeClass('active')
    $(this).addClass('active')
})

演示：小提琴

Answer 2

对于您的具体问题，如果您想要 ID，您可以这样做：

$("#upload").bind("click", function(){
   var upload = $(this).attr('id'); //this is the id
})

关键是 .attr('id')

正如其他海报所提到的，如果您只想更改背景颜色，您甚至不需要这个。但是，如果您想要一个仅处理您确定的某些 ID 的函数，您甚至可以执行以下操作：

$("button").bind("click", function(){
   var thisID = $(this).attr('id'); //this is the id

   if (thisID == "upload") {
      $(this).css({"background":"black","color":"white"});
   }
});

干杯，希望有帮助。

Answer 3

$(":button").bind("click", function(){
            iid=this.id;
                if(iid=="upload")
                {
                    $(this).css('background-color', 'blue')
                }
                else if(iid=="upload1")
                {
                    $(this).css('background-color', 'yellow')
                }
                else
                {

                }
            });
    });

Answer 4

这是你想要的吗？

演示

HTML

 <div data-role=page id=home>
              <div data-role=header>
                <h1>Location</h1>
              </div>

              <div data-role=content>

                    <a id="ButtonLocation" data-role="button" ><h4>Upload</h4></a>
              </div>
</div>

JS：

$('#ButtonLocation').click(function() {
    alert($(this).text())
});