jquery在单击和向后更改图像答案

【问题标题】：jquery change image in click and backwardsjquery在单击和向后更改图像
【发布时间】：2012-10-02 15:43:10
【问题描述】：

我很抱歉这个简单的事情，但图像更改不适用于此。我已经尝试了很多选项，但也许我看不到问题。

 $('#accordion li.first').click(function() {
                    if ($(this).children('img').attr('src','img/drop.png')) {
                        $(this).children('img').attr('src','img/drop90.png');
                    }
                    if ($(this).children('img').attr('src','img/drop90.png')) {
                        $(this).children('img').attr('src','img/drop.png');
                    }
                 });

【问题讨论】：

你使用的$.attr()的形式是设置'src'属性，不测试是否等于第二个参数。

标签： jquery image attr

【解决方案1】：

你可能想要

if ($(this).children('img').attr('src')=='img/drop.png') {

而不是

if ($(this).children('img').attr('src','img/drop.png')) {

【讨论】：

【解决方案2】：

如果你想做一些不同的事情，请按照以下步骤操作：-

为图片添加类drop & drop90
在drop & drop90 CSS 类上，应用 background-image: url(img/drop.png); 和 background-image: url(img/drop90.png);
使用提到的 Jquery 和示例 CSS 使用函数 toggleClass() 切换两个类

jQuery:

$('#accordion li.first').click(function() {
    $(this).children('img').toggleClass("drop drop90");
});

CSS：

.drop {
    background-image: url(img/drop.png); 
    height: 100px; 
    width: 200px;
}
.drop90 {
    background-image: url(img/drop90.png); 
    height: 100px; 
    width: 200px;
}

【讨论】：

【解决方案3】：

if ($(this).find('img').attr('src') === 'img/drop.png') 将始终评估为 true.. 因为你是给它赋值而不是比较

试试这个

 $('#accordion li.first').click(function() {
       if ($(this).children('img').attr('src') === 'img/drop.png') {
          $(this).children('img').attr('src','img/drop90.png');
        }
        if ($(this).children('img').attr('src') === 'img/drop90.png') {
               $(this).children('img').attr('src','img/drop.png');
        }
 });

【讨论】：

【解决方案4】：

$('#accordion li.first').click(function() {
    var $this = $(this), $img = $this.children('img'), src = $img.attr('src');

    switch (src) {
        case 'img/drop.png':
            $img.attr('src', 'img/drop90.png');
        break;

        case 'img/drop90.png':
            $img.attr('src', 'img/drop.png');
        break;
    }
});

【讨论】：