JavaScript点击事件问题

Question

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

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

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

我的问题是，当用户点击透明空白图像后，当前没有显示丰富的图形。 下面是我到目前为止尝试过的代码。

HTML

 <div id="change">
 <img src="image-visable.png">
 <img src="image-hidden.png">
          </div>

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

笔 ： http ： //codepen.io/anon/pen/Hbcze任何想法？

Answer 1

切换元素的可见性

[...]删除以保持帖子简短 - 查看历史记录和/或工作演示

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

部分.getElementsByTagName("change")很可能是.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();
    }
}

有了这个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隐藏它，你必须再次显示。

这是完整的代码

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();
    }
}

以上代码的工作示例

另一个完全有效的例子

解释后更新3

他的例子显示了两张图片 。 白色图像始终可见。 如果用户点击它，则切换黑色图像可见性。 如果用户点击黑色图像，它将被隐藏， 请参见此处的示例

关于您对<noscript>评论的更新4

您写道： In the DOM tree i see <noscript> And images are not switching. i removed this node But when i reload its again there. Why its coming on page HTML tree? In the DOM tree i see <noscript> And images are not switching. i removed this node But when i reload its again there. Why its coming on page HTML tree?

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

我认为这超出了您的初始问题，因为我为您的问题提供了可行的解决方案。 但是为了给你一些提示，你必须回答几个问题

• 用户操作后哪些图像没有切换？ 为什么这与noscript-tag相关？
• 你使用wordpress来创建我们正在谈论的页面吗？
• 你如何嵌入视频 - 你是手动创建HTML还是使用wordpress功能嵌入视频
• 如果您完全控制源代码并删除某些内容，则会将其删除。 既然你说你removed the node but after a page load it is there again我假设你至少部分地使用了不是由你控制的功能（类似于上面的wordpress链接）。

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