0

その値でhtml要素を見つけたいです。私はidで試しましたが、私のケースは壊れやすいです:

擬似コード:

for user in users:
 <li id="followed" onclick="follow($(this).text())"><a class="follow">user.name</a></li>
endfor

各ユーザー名をクリックできるようにしたいので、彼をDBに保存し、ユーザー名の末尾に「保存済み」を追加します。このような：

"username" ==> after click: "username saved"

私はajaxを通してこれをやっています。

function follow(data){
    var Him = data;
    alert(Him);
    $.ajax({
        url: "/follow",
        type: "POST",
        datatype: "html",
        data: {Him: Him}
    }).success(function(response){
        $('#followed').append(response);
    });
}

このコードは問題ありませんが、ループの終わりまでにすべてのユーザー名にid='followed'.

そのため、その値で html 要素を見つけたいと考えています。例えば「ユーザー名」。
出来ますか？

4

1 に答える 1

4

パラメータを使用してcontext、AJAX リクエストの成功コールバックに渡されるコンテキストを変更できます。

ただし、最初にマークアップをクリーンアップし、これがループの場合は ID の代わりにクラス名を使用することから始めましょう。

for user in users:
    <li class="followed"><a class="follow">user.name</a></li>
endfor

さて、マークアップをクリーンアップしたので、目立たないよう.click()に this のイベントにサブスクライブしましょう<li>。

$(function() {
    $('.followed').click(function() {
        // Remark: maybe you wanna get just the username inside the anchor in which case
        // you probably need "var Him = $('a', this).text();"
        var him = $(this).text();
        $.ajax({
            url: '/follow',
            type: 'POST',
            dataType: 'html',
            context: this,    // <!-- Here, that's the important bit
            data: { him: him },
        }).success(function(response) {
            // since we have used the context, here 'this' will no
            // longer refer to the XHR object (which is the default) but
            // to whatever we have passed as context (in our case this
            // happens to be the <li> that was clicked) => we can be certain
            // that we are updating the proper DOM element
            $(this).append(response);
        });
    });
});
于 2012-07-01T06:50:01.550 に答える