JavaScript单击事件问题

在我的页面上有两个最初都可见的图像

• 一个是丰富的图形
• 另一个是透明的空白图像

当用户单击透明图像时，丰富的图形被隐藏。 当用户单击富格图形时，富格图形将再次隐藏

我的问题是，当前在用户单击透明空白图像后，富图形不会显示。下面是我迄今为止尝试过的代码

HTML

JAVASCRIPT

var port_change, i;
window.onload = function () {

    port_change = document.getElementById("change").getElementsByTagName("change");

    for (i = 0; i < port_change.length; i++) {
        port_change[i].style.display = "";

        port_change[i].onclick = (function (k) {
            var r = function () {
                this.style.display = "none";
                if (k >= port_change.length) { k = 0 }
                port_change[k].style.display = "none";
            };
            return r;
        })(i+1);
    }

    port_change[0].style.display = "";
}

var端口变化，i；
window.onload=函数（）{
port_change=document.getElementById（“更改”）.getElementsByTagName（“更改”）；
对于（i=0；i=port_change.length）{k=0}
端口更改[k]。style.display=“无”；
};
返回r；
})（i+1）；
}
端口_更改[0]。style.display=“”；
}

笔： 有什么想法吗？

切换元素的可见性 […]删除以保持帖子简短-请参阅历史记录和/或

更新以解决代码的某些部分 部分

.getElementsByTagName（“更改”）

很可能是.getElementsByTagName（“img”）。 某些属性（显示）已设置多次。所以我像这样重写了你的代码

function setHideHandler()
{
    return function () { 
       console.log("this", this);
       this.style.display = "none";                    
    };      
}

function setOnLoad(){           
    var image;              
    var port_change = document.getElementById("change").getElementsByTagName("img");
    for (i = 0; i < port_change.length; i++) {              
        image = port_change[i];         
        image.style.display = "";           
        image.onclick = setHideHandler();
    }
}

函数setHideHandler（）
{
返回函数（）{
console.log（“this”，this）；
this.style.display=“无”；
};      
}
函数setOnLoad（）{
var图像；
var port_change=document.getElementById（“变更”）.getElementsByTagName（“img”）；
对于（i=0；i

使用此html

<div id="change">
  <img id=t src="t.png" />
  <img id=g src="g.png" />
</div>

现在您可以看到，您设置了一个onclick处理程序来在单击图像后隐藏图像。用户单击任何图像（g或t）后，代码将隐藏此图像。在两个图像都被点击后，用户没有选择点击任何东西来重新显示另一个图像

因此，您必须找到一种方法来交叉连接它们。如果用户单击t，则显示g，隐藏t。现在g是可见的，用户可以单击g来隐藏它，您必须再次显示t

这是完整的代码

function showOther(el){
  if(el.nextElementSibling){
    sibling = el.nextElementSibling;
  }else if(el.previousElementSibling){
    sibling = el.previousElementSibling;    
  }
  sibling.style.display ='';
  el.style.display = 'none';
}

function setHideHandler() {
    return function () {                     
       showOther(this);                 
    };      
}

function setOnLoad(){           
    var image;              
var port_change = document.getElementById("change").getElementsByTagName("img");
    for (i = 0; i < port_change.length; i++) {              
        image = port_change[i];         
        image.style.display = "";           
        image.onclick = setHideHandler();
    }
}

功能显示其他（el）{
if（el.nextElementSibling）{
同级=el.nextElementSibling；
}else if（el.previousElementSibling）{
同级=el.PreviousElement同级；
}
sibling.style.display=''；
el.style.display='none'；
}
函数setHideHandler（）{
返回函数（）{
showOther（这个）；
};      
}
函数setOnLoad（）{
var图像；
var port_change=document.getElementById（“变更”）.getElementsByTagName（“img”）；
对于（i=0；i

上述代码的工作示例

在解释之后更新3 T.白色图像始终可见。如果用户单击它，黑色图像的可见性将切换。如果用户单击黑色图像，它将被隐藏

更新4关于您对

您写道：

在我看到的DOM树中，图像没有切换。我删除了这个节点，但是当我再次在那里重新加载它时。为什么会出现在页面HTML树上？

<noscript style="display: inline;">
    &lt;img class=stay src="trans.png"/&gt;
</noscript>

img class=stay src=“trans.png”/

我相信这远远超出了你最初的问题，因为我为你的问题提供了一个有效的解决方案。但是要给你一些提示，你必须回答几个问题

• 哪些图像在哪个用户操作后不切换？为什么这与noscript标记相关
• 你是用wordpress来创建的吗
• 你是如何嵌入视频的？你是手工创建html还是自己制作的
• 如果您完全控制源代码并删除某些内容，它将保持删除状态。既然您说您

  删除了节点，但在页面加载后它又出现了

  ，我假设您至少部分使用了并非100%由您控制的功能（类似于上面的wordpress链接）

---

请告诉我为什么你还没有接受我的答案？

你可以看看这个答案

getElementsByTagName（“更改”）

这是打字错误吗？请检查这支笔：也许我不擅长解释我的问题：（红色按钮一直可见，（因为红色按钮是我的透明图像）当客人来到我的网站，他看到两个按钮，红色和蓝色，如果他点击红色或蓝色按钮，蓝色按钮应该隐藏。当蓝色按钮隐藏，他再次点击红色按钮，看到蓝色按钮。红色点击，蓝色隐藏，蓝色点击蓝色隐藏，…换句话说，如果客人点击红色或蓝色按钮，蓝色应该隐藏并再次显示红色点击！请查看我的第三次更新。编码很简单-很难理解您想要什么。谢谢您的回答，正如我上面提到的，两个图像都是可见的，显示：“；当我单击透明或图形图像时，它会消失，但当我再次单击时，图形图像不会出现。因为我使用白色区域中的透明图像来单击。我希望这有助于更好地理解。g和t是可见的，因为用户可以看到g，但t是空白图像。但在页面上，两个图像都被加载。当来宾单击g或t时，g一个被javascript隐藏。但t仍然存在。当来宾再次单击t时，g不会出现。如果来宾单击t，g应该出现。t是白色区域w

<noscript style="display: inline;">
    &lt;img class=stay src="trans.png"/&gt;
</noscript>