javascript - 使用 jQuery 更改切换按钮的颜色

Question

我希望每次在 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>

如何才能在单击按钮时在按钮上显示另一个图像？

Answer 1

我认为最好的方法是:

1. 为此按钮创建两个背景的 Sprite 图像 - 因此，一个图像文件，两个图像并排。
2. 使用 CSS 将此图像设置为元素的 background-image
3. 给你的button#ocupationshow一个固定的宽度/高度，让jquery根据按钮的状态修改图像的background-position - 简而言之，根据按钮的当前状态，图像将在 button#ocupationshow 内向左/向右移动，并且您在任何时候都只能看到相关部分。

您可以按照建议动态修改 src 属性，但请记住，使用这种方法，单击按钮后新图像可能需要一些时间才能加载；按照我的方法，两张图像都是预加载的(因为它们是一张图像)，并且它只是四处移动，所以是即时的。

Sprites是一种很好的工作方式，我建议您研究一下:-)