更改按钮图像onclick

Question

我有一个名为button1的按钮，我想在点击后更改为button2。

.button1 {
   background-image: url("example.com"); 
 }

.button2 {
  background-image: url("example2.com"); 
 }

链接如下所示：

  <%= link_to example_path do %>
  <div class="button1"></div>
  <% end %>

并且jquery看起来像这样：

 $(document).ready(function(){
   $('.button1').click(function(){
     $(this).toggleClass(".button2");
  });
 });

当我点击它时，什么也没发生。

Answer 1

这是在CSS中更好的方法;

.button1 {
   background-image: url("example.com"); 
 }

.button1:active {
  background-image: url("example2.com"); 
 }

Answer 2

删除前导。在toggleClass行中：

 $(document).ready(function(){
   $('.button1').click(function(){
     $(this).toggleClass("button2"); //NOT .button2
  });
 });

Answer 3

这两个类之间没有冲突：

$(document).ready(function(){
   $('.button1').click(function(){
     $(this).removeClass("button1").addClass("button2");
   });
});

如果您选择这条路线，我建议在按钮上放置一个与包含background-image属性的类无关的标识符。

<%= link_to example_path do %>
<div class="mybutton button1"></div>
<% end %>

然后你可以这样做：

$(document).ready(function(){
   $('.mybutton').click(function(){
     $(this).toggleClass('button1 button2');
   });
});

当然，除非您不希望在单击按钮后切换按钮，否则此帖子中的第一个代码示例就足够了。