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

これはスコーピングの問題です。successajaxからのコールバック内では、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

オブジェクトが見つからない理由は、$(this)それが指していると思うオブジェクトを指していないためです。クリックイベントハンドラーとはコンテキストが異なるAjax呼び出しのコールバック関数内で使用しています。

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;
});
于 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 に答える