3

こんにちは、現時点では、ajax を使用して複数のフィールドの ID を取得し、データを送信して php 経由で削除するために、jQuery を使用しようとしています。これまでのところ、アイテムを削除することはできましたが、他の ID を削除することはできません。たとえば、次のようになります。

データベースから情報を取得する for ループがあります。

 for($i=0; $i < $data; $i++) {
    echo "
    <div class='list-item' data-action='delete' id='".$Data[$i]['ID']."'>
    <a class='title link' href='".$Data[$i]['URL']."' target='_blank'>".$Data[$i]['name']."</a>
    <span class='checkbox' id='".$Data[$i]['ID']."' value='".$Data[$i]['ID']."'></span>
    <div class='thumb'>                             
    <img src='".$Data[$i]['thumb']."' alt='' width='110' height='99'>                               
    <span class='attr'>".$Data[$i]['width'].'x'.$Data[$i]['height']."</span>                                
    <span class='size'>".$Data[$i]['size']."</span>                         
    </div>                          
    <div class='date'>".$Data[$i]['Date']."</div>                     
    </div>
    ";
  }

$Data[$i]['ID'] がどのように表示されるかに注意してください。

<div class="list-item" data-action="delete" id="89">
<a class="title link" href="http://URL" target="_blank">NAME</a>
<span class="checkbox" id="89" value="89"></span>
<div class="thumb">
<img src="thumb.png" alt="" width="110" height="99">
<span class="attr">100x100</span>
<span class="size">85.2 KB</span></div>
<div class="date">2012-06-11 01:25:20</div>
</div>

<div class="list-item" data-action="delete" id="90">
<a class="title link" href="http://URL" target="_blank">NAME</a>
<span class="checkbox" id="90" value="90"></span>
<div class="thumb">
<img src="thumb.png" alt="" width="110" height="99">
<span class="attr">100x100</span>
<span class="size">85.2 KB</span></div>
<div class="date">2012-06-11 01:25:20</div>
</div>

そのため、jQueryを使用して class="checkbox" と class="list-item" の両方にクラスを追加し、selectedクリックまたは.on('click'関数のイベントが発生したときに確認ウィンドウが表示されるようにします「削除してもよろしいですか?」と言って、OK の場合は、それぞれの要素の ID を取得し、ajax を使用してデータを投稿して、アイテムを即座に削除します!問題は、複数の ID で動作する必要があり、それを持っていないことです。selectedclass="checkbox" と class="list-item" のすべてにクラスを追加します選択されたselectedすべてのIDのクラスを持つ必要はありません

ここにこれを機能させようとする私の試みがあります

<script>
$(function (){
$('.list-item').on('click', function(e) {
$(this).addClass("selected");
if(window.confirm('Are you sure you want to remove?')) {
id = $(this).attr("id");
        //alert(id);
        $.ajax({
            type: 'post',
            url: 'something.php?action=delete&id='+id,
            dataType: 'json',
            data: {

            }, success: function(data) {
                if(data.error === true)
                    {
                        $.errRorBar({ bdS: "error", html: data.message , delay: 5000 });
                    }
                    else
                    { 
                    $.errRorBar({ bdS: "success", html: data.message , delay: 5000});
                    }
            }, error: function(XMLHttpRequest, textStatus, errorThrown) {
                $.errRorBar({ bdS: "error", html: "Opps! Something went wrong!" , delay: 5000 });

                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);

                // console.log(XMLHttpRequest.responseText);
            }

        });
        return false;
  }
});
});
</script>

では、どうすればこれを行うことができ、リストを更新してリストを非表示にしたり削除したりするにはどうすればよいですか? 現時点では、データベースからアイテムを削除しますが、複数のアイテムを選択した場合でも、選択した 1 つのアイテムに対して 1 回だけ、「削除に失敗しました」というメッセージが返されます。

ここにいる誰かが私を助けることができますか？私は何かが欠けていると思いますが、うまくいけば、これは私の状況の良い説明でしたありがとう

4

1 に答える 1

1

あなたのコードを調べた後、私はいくつかのグリッチを見つけました：

  1. クラスリストの要素div-dom仕様に反する同じIDを持つアイテムとクラスのスパンチェックボックス。（div-89、span-89などのIDの前にプレフィックスを使用します）。
  2. リクエストタイプのpostを使用していますが、getメソッドであるurlにデータを投稿しています。
  3. チェックボックスのクリックイベントでリクエストを送信しているので、チェックボックスを選択すると毎回起動されるため、このアプローチを使用して複数のアイテムを削除することはできません。

解決策：削除の個別のボタンを作成し、そのボタンをクリックするとリクエストを送信します。

コードは次のようになります。

$('.list-item').click(function() {
    $(this).addClass('selected');
});

$(.delete).click(function() {
    var delIds = new Array();
    $('.selected').each(function() {
        delIds.push($(this).attr('id'));
    });

    $.ajax({
        url: 'something.php?action=delete&id='+delIds.join(),
        dataType: 'json',
        success: function(data) {
                    if(data.error === true)
                        {
                            $.errRorBar({ bdS: "error", html: data.message , delay: 5000 });
                        }
                        else
                        { 
                            $.errRorBar({ bdS: "success", html: data.message , delay: 5000});
                        }
                }, 
        error: function(XMLHttpRequest, textStatus, errorThrown)        {
                    $.errRorBar({ bdS: "error", html: "Opps! Something went wrong!" , delay: 5000 });

                    console.log(XMLHttpRequest);
                    console.log(textStatus);
                    console.log(errorThrown);

                    // console.log(XMLHttpRequest.responseText);
            }
    });
});

これがお役に立てば幸いです

于 2012-06-11T08:38:54.330 に答える