3

您好，目前我正在尝试使用 jQuery 来使用 ajax 获取多个字段的 id 并发送数据以通过 php 将其删除。到目前为止，我能够删除该项目，但我无法删除其他 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' 函数的事件时，它将执行一个确认窗口说“你确定要删除吗？”如果确定，然后获取每个元素的 id 并使用 ajax 发布数据以立即删除该项目！问题是我需要它处理多个 id 而不是将类添加selected到所有 class="checkbox" 和 class="list-item" 需要它是具体的，如果我这样做的话，我会选择 84、94、99 和 100 的项目被选中的应该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>

那么我该如何做到这一点以及如何进行刷新以更新列表使其隐藏或删除它或其他什么？目前，它会从数据库中删除该项目，但即使我选择了多个项目，我选择的一项也只会删除一次，我会得到“删除失败”的返回

这里有人可以帮助我吗？我想我遗漏了一些东西，但希望这是对我的情况的一个很好的解释谢谢

4

1 回答 1

1

查看您的代码后，我发现了一些故障：

  1. 类列表项的元素 div 和具有相同 id 的类复选框的跨度，这违反了 dom 规范。（在 div-89、span-89 等 id 之前使用前缀）。
  2. 您正在使用请求类型 post 但将数据发布在 url 中，即 get 方法。
  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 回答