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

PEN ：http://codepen.io/anon/pen/Hbcze 有什么想法吗？

Answer 1

切换元素

的可见性

[...]已删除以保持帖子简短 - 查看历史记录和/或 working demo

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

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

以上代码的工作示例

<强> Another fully working example

解释后更新3

Ťhis example shows two images。白色图像始终可见。如果用户点击它，则切换黑色图像可见性。如果用户点击黑色图片，则会隐藏 see example here

关于您对<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?

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

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

• 哪些用户操作后哪些图片没有切换？为什么这与noscript-tag相关？
• 您是否使用wordpress创建the page we are talking about？
• 如何嵌入视频 - 您是手动创建HTML还是using wordpress features to embed video
• 如果您完全控制源代码并删除某些内容，则会将其删除。既然你说你removed the node but after a page load it is there again我认为你至少部分使用了不受你100％控制的功能（类似于上面的wordpress链接）。

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