Question

我试图在mouseover上使用ajax从文件中获取数据。一切正常，除非我尝试访问匿名函数中的<p>元素，否则我什么也得不到。可能的原因是元素在匿名函数内丢失了范围。如果您看到可能的解决方案，请告知。

<html>
    <head>
        <title>MouseOver Effect And Ajax </title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <script type="text/javascript" src="http://localhost/study/libraries/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var xhr=false;
                initAll();

                $('div.pcard').mouseover(function(){
                    if(xhr)
                    { 
                        var pname=$(this).children('p.pname').text();
                        var pname=pname+"_details.txt";
                        xhr.open("GET",pname);;
                        xhr.onreadystatechange=function(){
                            if(xhr.readyState==4)
                            { 
                                if(xhr.status==200)
                                { 
                                $(this).children('p.pdesc').text(""+msg);

                                alert($(this).children('p.pname').text());

                                $(this).children('p.pdesc').css({'visibility':'visible'});
                                }
                            }
                        }.bind(this);
                        xhr.send(null);
                    }
                });

                $('div.pcard').mouseout(function(){
                    $(this).children('p.pdesc').css({'visibility':'hidden'});   
                });


                function initAll()
                { 
                    if(window.XMLHttpRequest)
                    { 
                        xhr=new XMLHttpRequest();
                    }
                    else if(window.ActiveXObject)
                    { 
                        try{
                            xhr=new ActiveXObject("Microsoft.XMLHTTP");
                        }catch(e){}
                    }
                }


            });
        </script>
    </head>
    <body>
        <h2>Interactive MouseOver</h2>
        <div id="products">
            <div class="pcard">
                <p class="pname">Sandwhiches</p>
                <p class="pdesc"></p>           
            </div>
            <div class="pcard">
                <p class="pname">Pizzas</p>
                <p class="pdesc"></p>           
            </div>
            <div class="pcard">
                <p class="pname">Soups</p>
                <p class="pdesc"></p>           
            </div>
            <p style="clear:both"></p>
        </div>
    </body>
</html>

Answer 1

我们的评论者得出的结论是，分享一个XMLHttpRequest并不是一个好主意，您可能希望在发生的每个mouseover事件中启动一个新的open。当您在已打开/未完成的请求上致电send时，事情会变得混乱，而$(document).ready(function () { $('div.pcard').mouseover(function () { var self = $(this); var pname = self.children('p.pname').text(); var pname = pname + "_details.txt"; var xhr = ajaxFunction(); xhr.open("GET", pname); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { var msg = "" + xhr.responseText; self.children('p.pdesc').text(""+msg); //alert(self.children('p.pname').text()); self.children('p.pdesc').css({'visibility':'visible'}); } } }; xhr.send(null); }); $('div.pcard').mouseout(function(){ $(this).children('p.pdesc').css({'visibility':'hidden'}); }); }); function ajaxFunction() { var ajaxRequest; // The variable that makes Ajax possible! try { // Firefox, Chrome, Opera 8.0+, Safari ajaxRequest = new XMLHttpRequest(); } catch (e) { // Internet Explorer Browsers try { ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) { try { ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) { throw new Error("This browser does not support XMLHttpRequest."); } } } } } return ajaxRequest; }应该没问题。通常做的是这样的事情：

ajaxFunction

在msg中，我不确定你是否真的必须通过前2次ActiveXObject尝试，这只是我见过的东西......还有几个你可以“试试”。在您的原始代码中有一些奇怪的东西（由其他人编辑而没有查看） - 您注释掉了设置.bind变量的行，然后您尝试在下一行使用它。 $.ajax可能有效，但我喜欢我提供的方式...这取决于你...尝试两者并看看是否有一个单独工作。

但正如另一个答案已经指出的那样，如果您已经在使用jQuery，为什么不使用{{1}}？

Answer 2

你有jquery，为什么要重写自己的ajax调用？

将其保存到本地变量中：var that = this然后您可以重复使用它。

$(document).ready(function(){
    $('div.pcard').mouseover(function(){

    var pname=$(this).children('p.pname').text();
    pname=pname+"_details.txt";
    var that = this; /// keeping the scope
    $.ajax({
       url:pname,
       success: function () {
           $(that).children('p.pdesc').text(""+msg);
           alert($(that).children('p.pname').text());
           $(that).children('p.pdesc').css({'visibility':'visible'});

       }
    });
});

在ajax程序中访问匿名函数中的元素时出错

2 个答案: