Javascript函数changeImage:使用getElementById或getElementsByName变量

Javascript function changeImage: Issues using variables for getElementById or getElementsByName

本文关键字：getElementsByName 变量 getElementById 使用 函数 changeImage Javascript      更新时间：2023-09-26

我在让代码执行我想要的操作时遇到了一些问题。我已经设置了多个部分来切换显示/隐藏，并且它运行正常。然而，我现在正试图将图像切换到哪里，而不是总是用"更多"来保持静态，我希望它在扩展时切换到"更少"。

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

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>

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);" 的内联处理程序

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

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

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

检查此

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')" >
相关文章：
  • 没有找到相关文章