Javascript函数changeImage：使用getElementById或getElementsByName变量的问题

我在执行我想要的代码时遇到了一些麻烦。我有多个部分，我已经设置切换显示/隐藏，并且它的功能正确。但是，我现在试图将图像切换到“更多”，而不是始终静止的位置，我希望它在展开时切换到“较少”。Javascript函数changeImage：使用getElementById或getElementsByName变量的问题

它确实有效......但只适用于第一个。如果我按任何其他按钮，它只会改变第一个按钮。你可以在这里看到的页面：

http://jfaq.us

我试着变量几个不同的解决方案，但我似乎无法得到它的工作。

帮助？提前致谢！

function changeImage() { 
    if (document.getElementById("moreorless").src == "http://jfaq.us/more.png") 
    { 
     document.getElementById("moreorless").src = "http://jfaq.us/less.png"; 
    } 
    else 
    { 
     document.getElementById("moreorless").src = "http://jfaq.us/more.png"; 
    } 
} 

function toggleMe(a){ 
    var e=document.getElementById(a); 
    if(!e)return true; 
    if(e.style.display=="none") 
    { 
     e.style.display="block" 
    } 
    else{ 
     e.style.display="none" 
    } 
    return true; 
}

<div> 

    <a href="http://jfaq.us/guestbook">Guestbook</a> 

    <div> 

     <input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para3')" > 

    </div> 

<div id="para3" style="display:none"> 

This is normally hidden, but shows up upon expanding. 
This is normally hidden, but shows up upon expanding. 

</div> 

    <a href="http://jfaq.us/about">About</a> 

    <div> 

     <input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para2')" > 

    </div> 

<div id="para2" style="display:none"> 

This is normally hidden, but shows up upon expanding. 
This is normally hidden, but shows up upon expanding. 

</div> 

</div>

来源

2013-08-02 Johnathan ' Zy' Sawyer

你所有的按钮具有相同的ID。 ID在文档中应该是唯一的。如果要使用选择器来定位多个元素，请使用类，或将事件传递到事件处理函数中并使用它。 – godfrzero

是的，我知道这一点。我把这个基本代码工作，因为我没有运气使用getElementsByName或getElementsbyClassName在我的尝试。你能提供一个小例子吗？我对javascript还是有点新鲜。 –

它看起来像你有jQuery包括，即使它是一个旧版本。如果您更新版本并从脚本开始绑定事件，您的代码可能会看起来更清晰。 – godfrzero

id属性必须是唯一的。这就是为什么它不起作用。此外，使用内联事件处理程序并不是一个好主意，您应该使用addEventListener来注册事件处理程序。

在不更改所有代码的情况下，您可以做的一件事是将对当前单击元素的引用传递给changeImage函数。

function changeImage(el) { 
    var moreUrl = 'http://jfaq.us/more.png'; 
    el.src = el.src === moreUrl? 'http://jfaq.us/less.png' : moreUrl; 
}

然后，更改在线处理程序onclick="changeImage(this);"

来源

2013-08-02 18:30:50 plalx

这工作完美。非常感谢你！ –

有没有一种快速的方法来在我的代码中添加一个700毫秒的淡入/淡出，还是我最好使用CSS淡入淡出？ –

那是因为你用相同的ID为两个图像，并且显然的getElementById采取的第一个。

下面是更新后的代码： HTML：

<input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage.call(this);return toggleMe('para3')" >

脚本：

// inside the event handler 'this' refers to the element clicked 
function changeImage() { 
    if (this.src == "http://jfaq.us/more.png") { 
     this.src = "http://jfaq.us/less.png"; 
    } else { 
     this.src = "http://jfaq.us/more.png"; 
    } 
}

来源

2013-08-02 18:24:46 amakhrov

这是不正确的。在这种情况下，上下文对象将成为窗口，您将在窗口对象上设置“src”属性。 – plalx

是的。也可以这样改变'onlick'的定义： – amakhrov

您正在使用相同的ID来进行输入。这是造成这个问题的原因。为每个元素指定一个唯一的ID。

如果要执行grp操作，请使用jquery类。

来源

2013-08-02 18:28:06 Rupesh

检查这个

http://jsfiddle.net/Asb5A/3/

function changeImage(ele) { 
if (ele.src == "http://jfaq.us/more.png") 
{ 
    ele.src = "http://jfaq.us/less.png"; 
} 
else 
{ 
    ele.src = "http://jfaq.us/more.png"; 
} 
} 

<input type="image" src="http://jfaq.us/more.png" onclick="changeImage(this);return toggleMe('para3')" >

来源

2013-08-02 18:58:03 Sam4Code

Javascript函数changeImage：使用getElementById或getElementsByName变量的问题

回答

相关问题