Question

我有一个jsFiddle设置，您可以在其中单击左侧的图像，当您这样做时更改图像，但是当您单击DIV作为整体（expand-one）时它不会交换图像了。

我希望能够点击DIV（作为一个整体）并换出DIV中的图像而不必仅仅点击图像。

你可以在这里查看我的意思： http://jsfiddle.net/5PDV5/1/

谢谢大家！：）

Answer 1

您需要做的就是在div的click处理程序中更改图像的src。

jQuery('.expand-one').click(function(){
        jQuery('.content-one').slideToggle('fast');
        var img = $(this).find('img'),
            src = img.attr("src")
            alt = img.data("altsrc");
            img.attr("src",alt).data("altsrc",src);
    });
    jQuery('.expand-one').toggle(function() {
        jQuery('.content-one').slideDown('fast');
        }, function() {
        jQuery('.content-one').slideUp('fast');
    });

另一种更有效的方法是使用类和背景图像，因此代码将如下所示：

HTML

<div class="expand-one blue-icon"></div>

CSS

.expand-one { margin-left: 5px } /* Margin of Icon Size */
.blue-icon { background-image: url('blue-icon.png'); }
.green-icon { background-image: url('green-icon.png'); }

JS

//This turns one off and the other on
$(this).toggleClass('blue-icon green-icon');

在DIV中更改图像onClick？

1 个答案: