0

我只是无法让这个（非常简单的）功能正常工作， parents() 似乎没有找到我想要的 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');但没有任何连接:(

4

4 回答 4

6

这是一个范围界定问题。在success来自 ajax 的回调内部，this并不是指您认为它所做的 - 它实际上是指函数本身。

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

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

   // ... //
}
于 2013-03-11T12:53:50.873 回答
3

The reason you can't find your object is because $(this) does not point to the object you think it points to. You're using it inside the callback function of an Ajax call, whose context is different than the click event handler.

Stick it in a variable before you do the Ajax call, then you'll be fine:

$('.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;
});
于 2013-03-11T12:54:10.827 回答
2

在单击处理程序中，您必须保留对按下按钮的引用，否则this将在 AJAX 成功处理程序中“覆盖”：

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

    img = "../"+img;

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

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

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

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

这样可以避免向服务器端脚本发送格式错误的查询字符串。

于 2013-03-11T12:56:45.897 回答
1

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

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;
});
于 2013-03-11T12:54:04.853 回答