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

切换元素的可见性

[...] 删除以保持帖子简短 - 查看历史记录和/或 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 将其隐藏，您必须再次显示 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();
    }
}

上述代码的工作示例

Another fully working example

在你解释后更新 3

T his example shows two images .白色图像始终可见。如果用户点击它，黑色图像的可见性就会切换。如果用户单击黑色图像，它将被隐藏 see example here

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

您写道: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 标签相关？
• 您是否使用 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 链接)。

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