2

ajax関数に問題があります。以下のコード:

<script type="text/javascript">
jQuery("#stage1 > div > div").live("click", function() {
    var cat=jQuery(this).parent().index() + 1;
    alert(cat);
    jQuery.ajax({
            type: "GET",
            url: "<?php echo get_permalink(177); ?>",
            data: {
                    curPage: <?php echo $post->ID; ?>,
                    id: cat }
    }).done(function(msg) {
        jQuery(this).html(msg);
    });
});
</script>

問題はthisin done 関数にあります。私はfirefoxにfirebugを持っています。そのため、データが返され、表示されるはずですが、表示されません。問題だと思いjQuery(this)ます。thisdone 関数での使用方法を知っている人はいますか?

4

4 に答える 4

3

thisinside.done()は、必要な とは異なるオブジェクトを参照してthisいます。また、.on()代わりに使用します.live()

<script type="text/javascript">
jQuery("#stage1 > div > div").live("click", function() {
    var cat=jQuery(this).parent().index() + 1;
    alert(cat);
    var self = this;
    jQuery.ajax({
            type: "GET",
            url: "<?php echo get_permalink(177); ?>",
            data: {
                    curPage: <?php echo $post->ID; ?>,
                    id: cat }
    }).done(function(msg) {
        jQuery(self).html(msg);
    });
});
</script>

を使用console.log(this)して、どのように異なるかを確認できます。thisキーワードの詳細については、MDN でこれを確認してください

于 2013-05-28T10:27:24.177 に答える
2

jQuery(this)これは ajax 関数を参照しているため、完了した関数には機能しません。オブジェクトを事前に保存してから、次のように呼び出すことをお勧めします。

<script type="text/javascript">
jQuery("#stage1 > div > div").live("click", function() {
    var obj = this;
    var cat=jQuery(this).parent().index() + 1;
    alert(cat);

    jQuery.ajax({
            type: "GET",
            url: "<?php echo get_permalink(177); ?>",
            data: {
                    curPage: <?php echo $post->ID; ?>,
                    id: cat }
    }).done(function(msg) {
        jQuery(obj).html(msg);
    });
});
</script>

他の解決策は、id を保存し、その後 jQuery で要素 byId を選択することですが、これは関数に直接作用することはできません

于 2013-05-28T10:29:45.957 に答える
0

これは、コールバックthisで元の要素にバインドされていないためです。代わりに、 と渡した AJAX オプションのdone()間の mixin にバインドされます。$.ajaxSettings

元のコンテキストを保持するthisには、$.ajax()contextに渡されるオプションで指定できます。

jQuery.ajax({
    context: this,
    type: "GET",
    url: "<?php echo get_permalink(177); ?>",
    data: {
        curPage: <?php echo $post->ID; ?>,
        id: cat
    }
}).done(function(msg) {
    jQuery(this).html(msg);  // Will work as expected.
});
于 2013-05-28T10:29:47.750 に答える
0

クロージャーを使用できます: {just an another way}

<script type="text/javascript">
jQuery("#stage1 > div > div").live("click", function () {
    var cat = jQuery(this).parent().index() + 1;
    alert(cat);
    (function (self) {
        jQuery.ajax({
            type: "GET",
            url: "<?php echo get_permalink(177); ?>",
            data: {
                curPage: <? php echo $post - > ID; ?> ,
                id: cat
            }
        }).done(function (msg) {
            jQuery(self).html(msg);
        });
    }(this));
});
</script>
于 2013-05-28T10:30:55.637 に答える