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

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>

score 0 · Accepted Answer

The id attribute must be unique. That's why it's not working. Also, it's not a good idea to use inline event handlers like you are doing, you should register event handlers using addEventListener instead.

Without changing all your code, one thing you can do is pass a reference to the currently clicked element to the changeImage function.

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

Then change the inline handler for onclick="changeImage(this);"

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

检查这个

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 - Javascript 函数 changeImage：使用 getElementById 或 getElementsByName 变量的问题

4 回答 4

Related

Reference