0

body セクションに次の html 要素があります。

<a class="tog" href="#">Click Me</a> 
<div class="result">
    This is a container div
</div> <br />
<a class="tog" href="#">Click Me</a> 
<div class="result">
    This is a container div
</div>

head セクションには次の内容が含まれます。

.result{
    display: none;
}

私がやりたいことは、各リンクをクリックしている<a>ときに、次のリンクdivがトグルし、同時に別のページdivからpost. したがって、私のjQueryコードは次のとおりです。

$(document).ready(function () {
    $(".tog").click(function () {
        if (!$(this).next(".result").data('loaded')) {
            $.post("anotherpage.php", {
                id1: "value1"
            }, function (data) {
                $(this).next(".result").html(data);
                $(this).next(".result").data('loaded', true);
            });
        }
        $(this).next(".result").slideToggle("slow");
        return false;
    });
});

各リンクの横に<a>ある各 div は、上記のコードによって適切に切り替えられます。しかし、データは別のページからフェッチされていません。上記のコードの各ポイントから $(this).next を除外すると、次のようになります。

$(document).ready(function () {
    $(".tog").click(function () {
        if (!$(".result").data('loaded')) {
            $.post("anotherpage.php", {
                id1: "value1"
            }, function (data) {
                $(".result").html(data);
                $(".result").data('loaded', true);
            });
        }
        $(this).next(".result").slideToggle("slow");
        return false;
    });
});

各 div は、各リンクをクリックして別のページからデータをフェッチした後にトグルしますが、リンクをクリックすると、同時にpostすべての s にデータがフェッチされます。div

私の質問は、各リンクをクリックするとdivそのリンクの隣に切り替わり、次のリンクdivのみにデータをフェッチするように、コードを修正するにはどうすればよいですか?

4

1 に答える 1

0

ここでの問題は$(this)、 ajax-wrapper 内でのコンテキストが失われていることだと思います。そのため、クリック関数内に元の要素への参照を保存し、成功関数内でキャッシュされたオブジェクトを呼び出す必要があります。

$(".tog").click(function(){
    var $this = $(this); //cached reference

それから後で..

},function(data){   
    //note how we use $this, instead of $(this)
    $this.next(".result").html(data);
    $this.next(".result").data('loaded',true);
于 2013-03-27T06:51:32.020 に答える