JavaScript点击事件问题 [英] JavaScript click event issue

查看：103
本文介绍了JavaScript点击事件问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的网页上有两张图片，这两张图片最初都是可见的


  • 其中一个是丰富的图形

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



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



我的问题是，当用户点击后，丰富的图形不会显示在透明的空白图像上。以下是我迄今试过的代码。

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 [i] .style.display =; 
 
 port_change [i] .onclick =（function（k）{
 var r = function（）{
 this.style.display =none; 
如果（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
任何想法？

解决方案

切换元素的可见性



[...]和/或 工作演示

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



零件 .getElementsByTagName（change）应该很可能是.getElementsByTagName（img）。
一些属性（显示）被设置多次。所以我重写了这样的代码 

  function setHideHandler（）
 {
 return function（）{
 console.log（this，this）; 
 this.style.display =none; 
}; 
} 
 
函数setOnLoad（）{
 var image; 
 var port_change = document.getElementById（change）。getElementsByTagName（img）; 
 for（i = 0; i  image = port_change [i]; 
 image.style.display =; 
 image.onclick = setHideHandler（）; 
 
 
 $ / code $ / pre 
 
 
使用这个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）; 
}; 
} 
 
函数setOnLoad（）{
 var image; 
 var port_change = document.getElementById（change）。getElementsByTagName（img）; 
 for（i = 0; i  image = port_change [i]; 
 image.style.display =; 
 image.onclick = setHideHandler（）; 
 
 
 
 
 $ b 
以上代码的工作示例 
 
 
  另一个完整的工作示例  
 
 
 
解释后更新3 
 
 
 
 T 他的例子显示了两张图片。白色图像始终可见。如果用户点击它，则黑色图像可见性被切换。如果用户点击黑色图片，它将被隐藏 请参阅此处的示例  
 
 
 
更新4关于您对< noscript>  
 
 $ b $的评论b 
您写道：在DOM树中，我会看到< noscript>和图像不切换。我删除了这个节点但是当我重新加载它的时候。为什么它在页面HTML树上出现？ 
 < noscript style =display：inline; > 
& lt; img class = stay src =trans.png/& gt; 
< / noscript> 
  
我相信这超出了您最初的问题，因为我为您的问题提供了一个可行的解决方案。但为了给你一些提示，你必须回答几个问题。 
 
 
     
     
  • 在哪些用户操作之后，哪些图像不会切换？为什么这与noscript-tag有关？ 
    •  
     
  • 您是否在使用wordpress创建我们正在谈论的页面？
    •  
     
  • 您如何嵌入视频 - 您是手动创建html还是使用wordpress功能嵌入视频  
    •  
     
  • 如果您完全控制源代码并删除它保留的内容除去。既然你说你删除了这个节点，但是在页面加载后它又出现了我假设你至少部分使用了不是100％被你控制的功能（类似于
    •  
     
 
 
 
 请告诉我为什么您还没有接受我的回答？ 
 
On my page are two images that are both visible initially



    

  • one is a rich graphic 
    • 

  • the other is a transparent blank image 
    • 




When a user clicks on the transparent image the rich graphic is hidden.
When the user clicks on the rich graphic the rich graphic is hidden again.



My problem is that currently the rich graphic is not shown after the user has clicked on the transparent blank image. Below is what code i've tried so far.



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
Any idea?
 解决方案 
Toggle visibility of element



[...] removed to keep the post short - see history and / or the working demo 



Update to address some parts of your code



The part .getElementsByTagName("change") should very likely be .getElementsByTagName("img"). 
Some properties (display) were set multiple times. So i rewrote your code like this 
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();
    }
}

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

So now you can see that you set up an onclick handler to hide the image after it has been clicked. After the user has clicked on any image (g or t) the code hides this image. After both images were clicked the user has no option to click on anything to redisplay the other image. 



So therefore you must find a way to crosswire them. If user clicks on t then g is shown and t is hidden. Now that g is visible the user can click g to hide it and you must show t again.



This is the complete code
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();
    }
}




Working example of above code



Another fully working example



Update 3 after your explanation



This example shows two images. The white image is always visible. If the user clicks on it the black image visibility is toggled. If the user clicks on the black image it will be hidden see example here



Update 4 regarding your comment on <noscript>



You wrote: 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>

I believe that this goes way beyond your initial question since i provided a working solution for your problem. But to give you a few hints you have to answer a few questions



    

  • Which images are not switching after which user action? Why is this relevant for the noscript-tag? 
    • 

  • Are you using wordpress to create the page we are talking about?
    • 

  • How do you embed the video - do you create the html by hand or are you using wordpress features to embed video 
    • 

  • If you have full control over the source code and remove something it stays removed. Since you said that you removed the node but after a page load it is there again i assume that you at least partially use functionality that is not 100% controled by you (similar to the wordpress link above).
    • 




Please tell me why you did not yet accepted my answer?


                        
这篇关于JavaScript点击事件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆