使用jQuery切换按钮颜色切换

我正在寻找更改按钮的颜色，或者在这种情况下，每次在jQuery的切换按钮上选择按钮的图像。这是我迄今为止的jQuery。使用jQuery切换按钮颜色切换

jQuery(document).ready(function() { 
    jQuery('#occupation').hide(); 
    jQuery('#occupationshow').on('click', function (event) { 
     jQuery('#occupation').toggle(); 
    }); 
});

这里就是我有一个按钮：

<button id="occupationshow"> 
    <img src="../SiteAssets/images/RAC/askcut/Occupation.jpg"> 
</button>

我怎样才能得到它让按钮被点击时，另一图像显示上的按钮？

来源

2015-06-08 Steven Dewar

最好的方式做到这一点，我认为以下几点：

此按钮创建两个背景的精灵形象 - 所以，一个图像文件，用两幅图像并排。
使用CSS设置此图像作为元素的background-image
给你的button#occupationshow一个固定的宽度/高度，都取决于按钮的状态jQuery的修改图像的background-position - 简单地说，根据当前按钮的状态，图像将在button#occupationshow内左右移动，您将只能在任何时候看到相关部件。

您可以按照建议动态修改src属性，但请记住，使用此方法时，一旦单击该按钮，新图像可能需要一些时间加载;用我的方法，这两个图像都是预加载的（因为它们是一个图像），它只是四处移动，所以是瞬间的。

Sprites是工作的一个很好的方式，我建议你寻找到他们:-)

来源

2015-06-08 12:47:09 d0ug7a5

您可以使用jQuery的css函数在每次点击时更改按钮的背景图像。

来源

2015-06-08 12:39:36

toggle()默认为显示/隐藏。使用attr()有一个回调函数

jQuery('#occupationshow').on('click', function (event) { 
    jQuery(this).find('img').attr('src', function(){ 
     var src = $(this).attr('src') == 'img1' ? 'img2' : 'img1'; 
     return src; 
    }); 
});

来源

2015-06-08 12:40:23 AmmarCSE

我猜你只有两个图像，对不对？所以你可以做的是把两个标签，对应你的两个图像，ont被设置为“display：none”。

<button id="occupationshow"> 
    <img src="../img1.jpg"> 
    <img src="../img2.jpg" style="display: none;"> 
</button>

而在jQuery的代码将是：

jQuery('#occupationshow').on('click', function (e) { 
    jQuery('#occupationshow img').toggle(); 
});

编辑：我又重新看了第一篇文章，不知道是什么让我猜OP只有两个图像.. （事实上他想用“切换”，我猜）

来源

2015-06-08 12:50:39

使用jQuery切换按钮颜色切换

回答

相关问题