Question

我在让代码做我想做的事情时遇到了一些麻烦。我有多个部分已设置为切换显示/隐藏，并且它正常运行。但是，我现在正试图将图像切换到“而不是一直静止”的“更多”，我希望它在扩展时切换到“更少”。

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

我已经尝试了几种不同的变量解决方案，但我似乎无法让它发挥作用。

帮助？提前谢谢！

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>

Answer 1

那是因为你对两个图像使用相同的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";
    }
}

Answer 2

您对所有输入使用相同的ID。这导致了这个问题。为每个元素提供唯一的ID。

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

Answer 3

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

的内联处理程序

Answer 4

检查这个

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

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

4 个答案: