1

重複の可能性:
$(this) は関数では機能しません

コード内の正しい要素をターゲットにするのに問題があります。私のページにはサムネイルのリストがあり、「これは嫌い」アイコンをクリックすると、対象の動画が別の動画に変わります。

ここにHTMLがあります

<li class="videoBox recommended">
   <div class="spacer" style="display: block;"></div>
   <div class="features">
       <div>
          <a class="dislike_black" title="I dislike this" onclick="ThumbsDown(30835, 'relevance', '1');"></a>
       </div>
   </div>
   <a href="...">
   <h1>...</h1>
   <div class="information">...</div>
</li>

アヤックスは：

function ThumbsDown(id,sort,page) {
$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST",
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    success: function(data) {
        //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
        $(this).parent("li.videoBox").html(data); // Cant get this to work!
    }
});

私は何を間違っていますか？$(this).css("border","1px solid red") でさえ「機能」していません。（背景色と色も試しました）何も表示されません。

$(This) は、関数が正しく呼び出される「a」タグを指しますか? それで、ビデオボックスという名前の彼の親を探しています... 助けて？

ターゲットにできますか

4

3 に答える 3

2

onclick特にユーザーがajaxを持っていない場合、これを簡単に劣化させる可能性があるため、イベントにバインドする必要があります。

<a>タグを次のように変更します。

<a href="/change/videos/1/thumbsdown/"
    data-sort="sort"
    data-page="page"
    class="dislike_black"
    title="I dislike this"></a>

jQuery イベント:

$('.dislike_black').click(function(e) {
    e.preventDefault(); // Prevent link from clicking

    var $aTag = $(this); // I use $aTag to denote a jq object

    $.ajax({
        url: $aTag.attr('href'),
        type: "POST",
        data: {
            "sort": $aTag.data('sort'), // data-sort attr value
            "page": $aTag.data('page') // data-page attr value
        },
        success: function(response) {
            $aTag.closest(".videoBox").html(response);
        }
    });
});

今では JavaScript なしで動作し、厄介な onclick を使用していません! 未テスト/無保証。

于 2012-01-27T16:17:30.190 に答える
2

ほとんど。これを機能させるには、contextを.ajax()呼び出しに渡す必要があります。

お気に入り

$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST", 
    context: document.body, // for instance
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    success: function(data) {
        //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
        $(this).parent("li.videoBox").html(data); // Cant get this to work!
    }
});

上記のコードにより、すべての ajax ハンドラーが をthis指すようになりdocument.bodyます。document.bodyしたがって、を探している要素に置き換える必要があります。したがって、たとえば、何らかの a で関数をclick handler呼び出すと、呼び出すだけcontext: thisで魔法が完了します。

詳細については、 jQuery Ajax Docセクションの「コンテキスト」を参照してください。

于 2012-01-27T16:19:32.570 に答える
0

元のコードを変更する必要があったthisのは、次のように、成功関数の外部への参照を取得することだけだったと思います。

function ThumbsDown(id,sort,page) {
    var self = this
    $.ajax({
        url: "/change/videos/"+id+"/thumbsdown/",
        type: "POST",
        data: {
            "sort": sort?sort:"",
            "page": page?page:""
        },
        success: function(data) {
            //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
            $(self).parent("li.videoBox").html(data); // Cant get this to work!
        }
    });
于 2012-01-27T17:40:24.827 に答える