更改图像src以扩展/折叠功能（JQ或JS）

问题描述

我已尝试在此网站上找到的几种方法让我的脚本更改+和 - 展开/折叠按钮图像，但我还没有找到合适的修复/方法。

I've tried several methods found on this site to get my script to change "+" and "-" expand/collapse button images, but I haven't yet found a suitable fix/method.

目前，我使用普通JS如下：

Currently, I am using plain JS as follows:

function swapimg(id) {
if(document.getElementById(id).src='images/bullet_expand.png')
{document.getElementById(id).src='images/bullet_expanded.png'}
else {document.getElementById(id).src='images/bullet_expand.png'}
}

和按钮：

<a href="javascript:void();" onclick="toggle_visibility('item1'); swapimg('phb');">
<img src="images/bullet_expand.png" border="0" style="padding-right: 5px;" id="phb" alt="">
</a>

第一次点击确实会改变图像，但第二次点击不会做任何事情。我觉得使用getElementById可能不是标准调用，所以使用JQuery也是我会考虑的选项。

The first click does change the image, but the second click does nothing. I have a feeling using "getElementById" might not be the standard call, so using JQuery is also an option I will consider.

推荐答案

您需要 == 而不是 =

而不是：

document.getElementById(id).src='images/bullet_expand.png'

使用

document.getElementById(id).src=='images/bullet_expand.png'

jQuery：

if(jQuery('#'+id).attr('src') == 'images/bullet_expand.png') {
   jQuery('#'+id).attr('src','images/bullet_expanded.png');
} else {
   jQuery('#'+id).attr('src','images/bullet_expand.png');
}

Javascript：

Javascript:

if(document.getElementById(id).src.indexOf('/images/bullet_expand.png') > 0) {
    document.getElementById(id).src='images/bullet_expanded.png';
}
else {
    document.getElementById(id).src='images/bullet_expand.png';
}

这篇关于更改图像src以扩展/折叠功能（JQ或JS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！