使用jQuery切換圖像src

我寫了一些代碼來切換圖像的src，並暫停/恢復jQuery cycle2插件。使用jQuery切換圖像src

我不知道爲什麼它不工作，並希望得到一些幫助。

$('.play-pause').click(function(){ 
    if ($(this).attr('src', '/images/template/pause.png')) { 
     $(this).attr('src', '/images/template/play.png'); 
     $('.cycle-slideshow').cycle('pause'); 
    } else if ($(this).attr('src', '/images/template/play.png')) { 
     $(this).attr('src', '/images/template/pause.png'); 
     $('.cycle-slideshow').cycle('resume'); 
    } 
});

如果我刪除'else if'語句，第一個'if'語句就起作用。

感謝您的幫助。

傑夫

來源

2013-09-27 jeffusu

對於UI元素，如暫停/播放按鈕，你應該使用CSS背景，不是內嵌圖片。那就是你可以簡單地交換類名來改變圖像。

您可以使用內嵌圖像，但應該再次使用類名簡化。

$('.play-pause').click(function(){ 
    if (!$(this).hasClass('play')) { 
     $(this).attr('src', '/images/template/play.png'); 
     $(this).addClass('play') 
     $('.cycle-slideshow').cycle('pause'); 
    } else { 
     $(this).attr('src', '/images/template/pause.png'); 
     $(this).removeClass('play') 
     $('.cycle-slideshow').cycle('resume'); 
    } 
});

來源

2013-09-27 18:21:30

這是有幫助的。我轉而使用CSS背景，而且它也很乾淨。 – jeffusu

是的，只需使用它並在一行代碼中執行此操作即可：http://api.jquery.com/toggleClass/ –

更爲通用，並檢查源的圖像而已，而不是整個字符串：

$('.play-pause').on('click', function(){ 
    var isPause = this.src.indexOf('pause.png') != -1; 
    this.src = isPause ? this.src.replace('pause.png', 'play.png') : this.src.replace('play.png','pause.png'); 

    $('.cycle-slideshow').cycle(isPause ? 'resume' : 'pause'); 
});

來源

2013-09-27 18:25:18 adeneo

不錯的優化，但沒有足夠的jQuery。 – undefined

$(document).ready(function(){ 
    $(".bulb").click(function(){ 
    var src = $(this).attr('src'); 
    var newsrc = (src=='images/dim.png') ? 'images/glow.png' : 'images/dim.png'; 
    $(this).attr('src', newsrc); 
    }); 
});

更降低線是可能的，但避免混淆。基本上，它獲取當前狀態屬性源並檢查和分配所需的源。

來源

2015-01-09 22:19:55 krozaine

有時它實際上是合理的想要直接交換圖像src而不是在CSS中處理它（主要是圍繞怪異的bug）。我已經在這種情況下所做的是寫了一個簡單的輔助功能，初始src和備用SRC之間切換，你也可以指定圖像元素本身，就像這樣：

function toggleImgSrc(jQueryObj) { 
    tmp = jQueryObj.attr('src'); 
    jQueryObj.attr('src', jQueryObj.attr('toggle_src')); 
    jQueryObj.attr('toggle_src', tmp); 
}

和圖像元素本身只是有一個名爲「toggle_src」額外的屬性（或者你可以動態地添加，如果你需要）：

<img src="initial_image.png" toggle_src="other_image.png"/>

來源

2015-03-13 16:35:28 Dan

我知道這是一個遲到的答案，但對使用的東西是什麼simplier這樣的：

$('.play-pause').click(function() { 
    var _this = $(this); 
    if (_this.attr("src") == '/images/template/pause.png') { 
     _this.attr('src', '/images/template/play.png'); 
     $('.cycle-slideshow').cycle('pause'); 
    } else { 
     _this.attr('src', '/images/template/pause.png'); 
     $('.cycle-slideshow').cycle('resume'); 
    } 
});

來源

2016-03-14 11:05:36 SoulOfkID

這是另一種方法：

<!-- HTML --> 
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png" class="fun-img" id="magic-toggle">

而對於jQuery的

/* jQuery */ 
$('#magic-toggle').click(function() { 
if($('.fun-img').attr('src') === plus) { 
    $('.fun-img').attr('src', minus); 
} else { 
    $('.fun-img').attr('src', plus) 
} 
})

需要一些有趣的動畫，大概，但得到所做的工作。

這裏有一個片段：

var plus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png'; 
 
var minus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5802-200.png'; 
 

 
$('#magic-toggle').click(function() { 
 
    if ($('.fun-img').attr('src') === plus) { 
 
    $('.fun-img').attr('src', minus); 
 
    } else { 
 
    $('.fun-img').attr('src', plus) 
 
    } 
 
})

.fun-img { 
 
    width: 80px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png" class="fun-img" id="magic-toggle">

來源

2016-07-14 22:12:59

使用jQuery切換圖像src

回答

相關問題