2

私のコードでは、ここで私の以前の質問から次の 2 行を使用しています。

$(this).removeClass('page larger').addClass('current');
$(this).siblings().removeClass('current').addClass('page larger');

これらを成功以外の場所に配置すると、正常に動作します。しかし、それらを成功の中に置くと、うまくいきません。私は彼らが成功のためにのみ働く必要があります:. どうすればこれを解決できますか?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PHP, jQuery search demo</title>
<style type="text/css">
.current{
padding:5px;
border:1px solid #000000;
background-color:white;
cursor:pointer;
}
.page{
padding:5px;
border:1px solid #000000;
background-color:red;
cursor:pointer;
}
</style>

<script type="text/javascript" src="http://localhost/jQuery1.8.3.js"></script>
<script type="text/javascript">
$(function() {

    $('.page').live('click', function() {

       var menus    =($(this).attr("menus"));
       var data            = menus;

        if(data) {

        //alert (data);
        //    // ajax call
            $.ajax({
                type: "GET",
                 url: "pages.php",
                data: data,
                dataType: "json",
               cache: false,
          beforeSend: function(html) {

                    $(".pageLoading").html("Fetching new posts...");

                },
               success: function(page_data){
                    $(".posts").empty();
                    $(".pageLoading").empty();
                    $(".posts").html(page_data['articles']);
                    console.log (page_data['articles']);

                               $(this).removeClass('page larger').addClass('current');
                              $(this).siblings().removeClass('current').addClass('page larger');

              },

          });    
        }
        return false;
    });
    /////////////////////////////////////////////////////////////////////////

});
</script>

</head>
<body>
    <div class="posts">These are the existing posts</div>
    <br />
        <div class="navigation clearfix">
            <div class="menusHolder">
                    <span  menus="in/consumer/p22" class="current">1</span>
                    <span  menus="in/consumer/p19" class="page larger">2</span>
                    <span  menus="in/consumer/p15" class="page larger">3</span>
                    <span  menus="in/consumer/p10" class="page larger">4</span>
            </div>
        </div>
        <br />
        <div class="pageLoading"></div>
</body>
</html>
4

3 に答える 3

3

ここで説明するように、コンテキストオプションがそのトリックを実行します。

次のように、ajax呼び出しに追加するだけです。

$.ajax({
    type: "GET",
    context: this,
    url: "pages.php",
    data: data,
    ...
    success: function() {
        $(this).removeClass('page larger').addClass('current');
        $(this).siblings().removeClass('current').addClass('page larger');
    }
});
于 2012-12-08T07:31:35.663 に答える
3

の範囲thisが変更されました。元の要素への参照を保持したい場合は、clickスコープで変数を作成すると、successハンドラーはそれをクロージャーに含めます。

$(function() {

    $('.page').live('click', function() {

       var menus    =($(this).attr("menus"));
       var data            = menus;
       var $that = $(this); // <- add this

        if(data) {

        //alert (data);
        //    // ajax call
            $.ajax({
                type: "GET",
                 url: "pages.php",
                data: data,
                dataType: "json",
               cache: false,
          beforeSend: function(html) {

                    $(".pageLoading").html("Fetching new posts...");

                },
               success: function(page_data){
                    $(".posts").empty();
                    $(".pageLoading").empty();
                    $(".posts").html(page_data['articles']);
                    console.log (page_data['articles']);

                     // change $(this) to $that. success handler is a closure that will include $that
                     $that.removeClass('page larger').addClass('current');
                     $that.siblings().removeClass('current').addClass('page larger');

              },

          });    
        }
        return false;
    });
    /////////////////////////////////////////////////////////////////////////

});
于 2012-12-08T07:28:06.153 に答える
3

使用する、

$('.page').live('click', function() {
   var $that = $(this);
   // use that 
});

ajax スコープでは、これは ajax オブジェクトを参照します。

于 2012-12-08T07:28:46.427 に答える