Question

我无法让这个（非常简单的）功能正常工作，parent（）似乎找不到我想要的div并淡出它：（

$('.deleteButton').click( function() {

    var img = $(this).attr('href');
    img = "../"+img;

    var answer = confirm('Are you sure you want to delete this item? (This cannot be undone!)');
    if (answer) {

        $.ajax({
            url: 'scripts/deletePhoto.php',
            data: 'img='+img,
            type: 'POST',
            mode: 'abort',
            success: function(){
                $(this).parents("div.photo").fadeOut('fast');
            }
        });
    }
return false;
});

HTML

<div class="photo">
    <img alt="" src="../static/images/photos/tmp/1.jpg">
    <div class="overlay" style="opacity: 0;">
        <p class="process success message">
            <a href="process_photo.php?img=../static/images/photos/tmp/1.jpg">Process this photo</a>
        </p>
        <p class="delete error message">
            <a href="../static/images/photos/tmp/1.jpg" class="deleteButton">Delete image</a></p>
    </div>
</div>

我已尝试$(this).parents(".photo").fadeOut('fast');和$(this).cloest("div.photo").fadeOut('fast');，但没有任何关联：（

Answer 1

这是一个范围问题。在来自ajax的success回调中，this并未引用您的想法 - 它实际上是指函数本身。

您应该在ajax调用之外缓存$(this)的副本，并使用：

$('.deleteButton').click( function() {
   var $img = $(this);

   //....//

   $.ajax({
        url: 'scripts/deletePhoto.php',
        data: 'img='+img,
        type: 'POST',
        mode: 'abort',
        success: function(){
            $img.parents("div.photo").fadeOut('fast');
        }
    });

   // ... //
}

Answer 2

找不到对象的原因是因为$(this)未指向您认为指向的对象。您在Ajax调用的回调函数中使用它，其上下文与click事件处理程序不同。

在进行Ajax调用之前将其粘贴到变量中，然后就可以了：

$('.deleteButton').click( function() {

    var img = $(this).attr('href');
    img = "../"+img;

    var answer = confirm('Are you sure you want to delete this item? (This cannot be     undone!)');
    if (answer) {

        var my_item = $(this);

        $.ajax({
            url: 'scripts/deletePhoto.php',
            data: 'img='+img,
            type: 'POST',
            mode: 'abort',
            success: function(){
                my_item .parents("div.photo").fadeOut('fast');
            }
        });
    }
return false;
});

Answer 3

在click处理程序中，您必须保持对按下按钮的引用，否则{AJ}成功处理程序中将“覆盖”this：

$('.deleteButton').click( function() {
    var img = $(this).attr('href'),
    $self = $(this);

    img = "../"+img;

然后，在成功处理程序中：

$self.parents("div.photo").fadeOut('fast');

顺便说一句，我建议在$.ajax电话中进行此更改：

data: 'img=' + encodeURIComponent(img),

这可以避免将错误的查询字符串发送到服务器端脚本。

Answer 4

您需要缓存当前事件并使用这些变量。这是一个范围问题。

var currObj=$(this); cache the current event and use those variable. 

$('.deleteButton').click( function() {
var $currObj=$(this); // cache the current event. 
    var img = currObj.attr('href');
    img = "../"+img;

    var answer = confirm('Are you sure you want to delete this item? (This cannot be undone!)');
    if (answer) {

        $.ajax({
            url: 'scripts/deletePhoto.php',
            data: 'img='+img,
            type: 'POST',
            mode: 'abort',
            success: function(){
                $currObj.parents("div.photo").fadeOut('fast');
            }
        });
    }
return false;
});

为什么jQuery parent（）找不到我的元素？

4 个答案: