jquery - 无法使用 jquery ajax 成功回调函数遍历 dom

Question

在下面的 html 中，我尝试使用 $(this) 遍历 DOM，但我找不到一些问题。

<div class="albumWrapper">
    <div class="album" id="test1">
        <div class="fadein">
            <img src="images/album/1_b.jpg" />
            <img src="images/album/2_b.jpg" />
        </div>
        <div class="descWrapper">
            <h1>
                <a href="1">Weddings</a>
            </h1>
            <div class="description">
                <span class="quotes">"</span>description 1<span class="quotes">"</span>
            </div>
        </div>
    </div>
    <div class="gallery"></div>
    <div class="album" id="test1">
        <div class="fadein">
            <img src="images/album/1_b.jpg" />
            <img src="images/album/2_b.jpg" />
        </div>
        <div class="descWrapper">
            <h1>
                <a href="2">Weddings</a>
            </h1>
            <div class="description">
                <span class="quotes">"</span>description 2<span class="quotes">"</span>
            </div>
        </div>
    </div>
    <div class="gallery"></div>
</div>

这是我写的jquery。但是当我使用 $(this) 时似乎有一些问题。所以请有人帮我找出错误。这会很有帮助。

        $(".descWrapper h1 a ").on("click", function(e) {
            e.preventDefault();
            $.ajax({
                url: 'ajaxify/gallery.php',
                type: "get",
                data: "id=" + $(this).attr('href'),
                beforeSend: function() {

                },
                success: function(data) {
                    $(this).parents(".album").next(".gallery").html(data);
                },
                error: function(xhr, status, errorThrown) {
                    alert();
                }
            });
        });

Answer 1

this在success函数不是正确的范围内，它不会是“.descWrapper h1 a”元素。所以事先设置this一个变量并使用该变量而不是this

$(".descWrapper h1 a ").on("click", function(e) {
    var element = $(this);
    e.preventDefault();
    $.ajax({
         url: 'ajaxify/gallery.php',
         type: "get",
         data: "id=" + $(this).attr('href'),
         beforeSend: function() {

         },
         success: function(data) {
              element.parents(".album").next(".gallery").html(data);
         },
         error: function(xhr, status, errorThrown) {
             alert();
         }
    });
});

Answer 2

使用 ajax 的上下文选项：

$(".descWrapper h1 a ").on("click", function (e) {
    e.preventDefault();
    $.ajax({
        context:this,
        url: 'ajaxify/gallery.php',
        type: "get",
        data: "id=" + $(this).attr('href'),
        beforeSend: function () {

        },
        success: function (data) {
            //now 'this' here refers to the clicked link
            $(this).parents(".album").next(".gallery").html(data);
        },
        error: function (xhr, status, errorThrown) {
            alert();
        }
    });
});