首页新闻找找看学习计划

ajax点击事件第一次无效,第二次有效,但是其他事件又出现问题。

0
悬赏园豆:50 [已解决问题] 解决于 2016-09-24 03:00

我在练习做一个网页的时候,做了一个滚动条。内有若干小图片在内滚动,点击滚动条里的图片,触发以下两个事件:

(1)在一个大div(bigcover)的img标记中显示滚动条点击的小图片

(2)在另外一个<div id="intro">中通过ajax请求相应的txt文档内容。

这时出现问题:

(1)首次点击滚动条内的小图,图片可以切换,但是<div id="intro">里的内容没有切换。

(2)再点击该小图,<div id="intro">里的内容切换成功。

(3)滚动条内,bigcover内的图片默认为a,首次点击图片b,切换成功。再首次点击图片c,图片切换成功,这时再次点击图片b,图片不切换。无论多少次都一样。

简单的说就是:文本内容框第一次点击没反应,第二次才正常,图片框却只有第一次点击才有反应。后面再点击就不切换了。

 

问题分析:

(1)图片滚动:原本是13张,我设置为26张,然后跳帧处理——不过这应该没关系

(2)我删除了调用ajax函数部分的语句后,图片切换正常

(3)经检测,第二次点击小图片时,ajax生效,但是并没有发生onclick事件。所以图片还是原来的。

 

代码如下

复制代码
function ajax(obj,url, fnSucc, fnFaild){
    

    obj.onclick=function(){
        var oAjax=null;
        if(window.XMLHttpRequest){
            oAjax=new XMLHttpRequest();
        }else{
            oAjax=new ActiveXObject("Microsoft.XMLHTTP");
        };
        
        oAjax.open('GET',url,true);
        
        oAjax.send();

        oAjax.onreadystatechange=function(){
            if(oAjax.readyState==4){

                if(oAjax.status==200){
                    fnSucc(oAjax.responseText);
                }else{
                    if(fnFaild){
                        fnFaild();
                    }
                    
                }
           }
        }
    }
}
//以上是ajax函数

function clickImg(){
    var oScrollUl=document.getElementById('scroll_ul');
    var aScrollImg=oScrollUl.getElementsByTagName('img');
    var oBigcover=document.getElementById('big_cover');
    var oCoverImg=oBigcover.getElementsByTagName('img')[0];
    var oIntro=document.getElementById('intro');

    for(i=0;i<aScrollImg.length;i++){
        
        aScrollImg[i].index=i+1;
        aScrollImg[i].onclick=function(){
            
        if(this.index>aScrollImg.length/2){
            this.index=this.index-aScrollImg.length/2;
        }
            oCoverImg.src=this.src;
            
            ajax(this,'service/'+this.index+'.txt?t='+new Date().getTime(),function(str){
                oIntro.innerHTML=str;

              
            });
            
        }
        
        
    }
}
//以上是点击事件函数
复制代码
葡萄美酒夜光杯的主页 葡萄美酒夜光杯 | 初学一级 | 园豆:74
提问于:2016-09-24 00:22
< >
分享
最佳答案
1

把ajax函数里的obj点击事件去掉,就显示正常了。原因是点击之后,又触发了一次点击前提。当时学习的时候,自作主张给ajax函数加了个obj参数和点击事件。以至于反复地在ajax函数语境内循环。

问题发现契机:注意到clickImg函数内的click事件总是在第一次之后不执行,终于留意ajax函数有问题,看了很多云里雾里的资料都说不到点,现在终于明白了。得来全不费工夫..

葡萄美酒夜光杯 | 初学一级 |园豆:74 | 2016-09-24 03:00
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册