Question

我的身体部分有以下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>

，头部包含：

.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数据后切换，但点击任何链接都会同时向所有div提取数据。

我的查询是如何修改代码，以便点击每个链接会切换该链接旁边的div并仅将数据提取到下一个div？

Answer 1

我认为这里的问题是$(this)的conext在ajax-wrapper中丢失了。所以你需要在click函数中存储对原始元素的引用，并在success函数中调用缓存的对象。

$(".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);

切换每个链接旁边的每个div并获取发布数据

1 个答案: