1

<span>ボタンがクリックされたときにaのhtml値をインクリメントしようとしています<span>が、ページに物理的に表示されている数値があるにもかかわらず、jQueryはの値が未定義であると言っています。HTMLを生成するPHPセクションは次のとおりです。

echo '<div class="box" style="background-color:'.$colours[0].'">
      <p>'.$confessions[0].'<br></p><br>
      <div class="overlay"></div>
      <div class="slide">
        <div class="slideleft">#'.$ids[0].'</div>
        <div class="slideright">
            <span class="upvote" id="'.$ids[0].'">Upvote</span>
            <span class="counter" id="'.$ids[0].'">"'.$counter[0].'"</span>
        </div>
      </div>
      </div>'

HTMLを魔法のようにすることになっているjQueryは次のとおりです。

$("body").on("click", ".upvote", function(e) {
    $.ajax({
        url: 'vote.php',
        data: {
            type: 'up',
            id: $(this).attr('id')
        },
        type: 'post',
        success: function(data) {
            if (data == 'ok') {
                alert($(this).next().html());
            } else {};
        }
    });
});

ボタンが押されたときにアラートを出しupvoteますが、その値はundefined実際の数とは対照的です。誰かがこの問題に光を当てることができますか？

ありがとう

4

4 に答える 4

6

$(this)成功関数内でスコープ外になるため、クリックされた要素は含まれなくなります。代わりに、成功関数内で使用するために変数をキャッシュする必要があります。

例えば：

$("body").on("click", ".upvote", function(e){
    var clicked = $(this);
    $.ajax({ 
        url: 'vote.php',
        data: { type: 'up', id: clicked.attr('id') },
        type: 'post',
        success: function(data) {
            if(data == 'ok'){
                alert(clicked.next().html());
            } else {
            };
        }
    });   
});
于 2012-12-30T16:11:25.590 に答える
1

あなたの問題はそれthisがあなたが期待するものではないということです。「success」コールバックで、 jqXHRthisオブジェクトにリバウンドされました-そしてそれを取得すると、未定義が返されます。next()

この問題を解決するには、明示的なキャプチャをお勧めします。

$("body").on("click", ".upvote", function(e){
    var self = this; /// capture "this" explicitly here
    $.ajax({ 
        url: 'vote.php',
        data: { type: 'up', id: $(this).attr('id') },
        type: 'post',
        success: function(data) {
                    if(data == 'ok'){
                    alert($(self).next().html()); /// so now it is available here
                  } else {
                  }
        }
    });   
});
于 2012-12-30T16:13:15.513 に答える
1

$(this)ここでは、DOM要素を参照していないと思います。ajax関数の前に追加してみてください

var elem = $('.upvote');

そして使用する

elem$(this)ajax関数ではなく。

于 2012-12-30T16:14:02.360 に答える
1

メソッドに適用するためのパスthisとしてcontextajax

アクセスするために新しい変数を作成する必要はありませんthis

ドキュメントをチェックしてください：http：//api.jquery.com/jQuery.ajax/ 

 $("body").on("click", ".upvote", function(e){

        $.ajax({ 
            url: 'vote.php',
            context: this, // capture this here instead
            data: { type: 'up', id: $(this).attr('id') },
            type: 'post',
            success: function(data) {
                if(data == 'ok'){
                    alert($(this).next().html()); /// so now it is available here
                } 
            }
        });   
    });
于 2012-12-30T17:10:48.847 に答える