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

这样做的最佳方式是我认为如下：

为此按钮创建两个背景的精灵图像 - 因此，一个图像文件，并排显示两个图像。
使用CSS

background-image

给你的button#occupationshow一个固定的宽度/高度，让jquery根据按钮的状态修改图像的background-position - 根据按钮的当前状态，简单地放置，图像将在button#occupationshow内向左/向右移动，您只能在任何时间看到相关部分。

您可以根据建议动态修改src属性，但要记住，使用此方法，单击按钮后新图像可能需要一些时间才能加载;在我的方法中，两个图像都被预加载（因为它们是一个图像）并且它只是四处移动，所以它是即时的。

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

Answer 2

您可以使用jquery的css功能在每次点击时更改按钮的背景图像。

Answer 3

默认情况下，

jQuery('#occupationshow').on('click', function (event) { jQuery(this).find('img').attr('src', function(){ var src = $(this).attr('src') == 'img1' ? 'img2' : 'img1'; return src; }); });用于显示/隐藏。使用带有回调函数的attr()

$('#employment_details').change(function() {
    if (this.value == 'Retired') {  
        $('form.idealforms').idealforms('toggleFields', 'company_name getemployed');
        $('form.idealforms').idealforms('goToStep', 5);
    }

    if (this.value == 'Employed') { 
        $('form.idealforms').idealforms('toggleFields', 'monthly_pension_amount pension_type getretired');
        $('form.idealforms').idealforms('goToStep', 5);
    }

    $('#employment_details').attr('disabled', 'disabled');
});

Answer 4

我猜你只有两张照片，对吗？所以你能做的就是把两个标签对应两个图像，设置为“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只有两张图片......（我猜他要使用“切换”的事实，我猜）

使用jQuery在切换时按钮更改颜色

4 个答案: