Javascript函数changeImage:使用getElementById或getElementsByName变量时出现的问题

我在让我的代码做我想做的事情时遇到了一些问题。我已经设置了多个部分来切换显示/隐藏，并且功能正常。然而，我现在尝试将图像切换到哪里，而不是总是静态地使用“更多”，我希望它在扩展时切换到“更少”

它确实有用。。。但只有第一次。如果我按下其他任何一个按钮，它只会改变第一个。您可以在此处看到该页面：

我尝试了几种不同的变量解决方案，但似乎无法使其发挥作用

帮忙？提前谢谢

---

---

这通常是隐藏的，但在扩展时显示。
这通常是隐藏的，但在扩展时显示。
这通常是隐藏的，但在扩展时显示。
这通常是隐藏的，但在扩展时显示。

---

这是因为两个图像使用相同的id，而getElementById显然是第一个

以下是更新的代码： html:

---

您对所有输入使用相同的Id。这就是问题的根源。 给每个元素一个唯一的Id

---

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

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）；”的内联处理程序


功能更改图像（ele）{
如果（ele.src==”http://jfaq.us/more.png") 
{
ele.src=”http://jfaq.us/less.png";
}
其他的
{
ele.src=”http://jfaq.us/more.png";
}
}
您所有的按钮都具有相同的ID。ID在文档中应该是唯一的。如果您想使用选择器以多个元素为目标，请使用类，或者将事件传递到事件处理程序函数并使用它。是的，我知道这一点。我使用这个基本代码是为了工作，因为我在尝试使用getElementsByName或getElementsbyClassName时运气不佳。你能举个小例子吗？我对javascript还是有点陌生。看起来您已经包含了jQuery，即使它是一个旧版本。如果您更新版本并从脚本开始绑定事件，您的代码可能会看起来更干净。这是不正确的。在这种情况下，上下文对象将是window，您将在window对象上设置
src
属性。没错。也可以这样更改“onlick”的定义：是否有一种快速的方法可以在我的代码中添加700毫秒的淡入/淡出，或者我最好使用CSS进行淡入/淡出？
<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>

 <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";
    }
}

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

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')" >