Question

我正在尝试使用php，ajax和mysql创建一个todo应用程序。应该有一个按钮，一旦点击，就会从屏幕和数据库中删除该项目，但我不知道如何引用我想删除某个项目。

（每个项目在数据库中都有唯一的ID，也包含文本和包含它的列表中的ID）

我的html的例子就是这样的：

 <ul id="list">
    <li class="item">
        <div class="draggertab">
            <img src="imatges/botofletxa.jpg" width="30" height="30">
        </div>
        <div class="deletetab">
            <img src="imatges/botocreu.jpg" width="30" height="30">
        </div> <span>Buy some cookies</span> 
    </li>
</ul>

我的javascript代码看起来像那样：

  $('.deletetab').live('click', function () {
      var result = confirm("Are you sure?");
      if (result == true) {
          $(this).parent().remove();
      }
  });

但我不知道如何将（使用ajax）信息发送到另一个php文件（连接到数据库），或者我应该使用哪个变量。

对不起，如果这是一个愚蠢的问题，我是编程的新手！

Answer 1

我不知道你是如何渲染列表的（ul），假设它是foreach循环或类似的东西。您可以将每个项目的ID存储在隐藏字段中，以便您可以从js访问它的值：

 <ul id="list">
    <li class="item">
        <input type="hidden" class="hidden_id" value="render_id_here" />
        <div class="draggertab">
            <img src="imatges/botofletxa.jpg" width="30" height="30">
        </div>
        <div class="deletetab">
            <img src="imatges/botocreu.jpg" width="30" height="30">
        </div> <span>Buy some cookies</span> 
    </li>
</ul>

JS：

$('#list').on('click', '.deletetab', function(){
    var result = confirm("Are you sure?");

    if (result==true) {
         var parent = $(this).parent();

         $.ajax({
             type: 'POST',
             data: { idToDelete: parent.find('.hidden_id').val() }, //Find hidden ID field within parent div and read it's value
             url: 'delete.php'
         }).done(function() { //success callback
                parent.remove(); 
            }).fail(function(qXHR, textStatus) { //error callback
                alert('Server responded with error status ' + textSatus);
            });           
      }  
    });

在服务器端，您需要搜索发布数据中的“idToDelete”参数。

Answer 2

首先，您可以将商品的ID放在每件商品的data-id属性上。

<li class="item" data-id="{{ item_id"}}>
    // the rest of the html
</li>

然后是javascript

$('.deletetab').click(function() {
    var $this, $item;
    $this = $(this);
    $item = $this.closest('.item');
    if (confirm('Are you sure')) {
        $.post('url_to_delete.php', {id: $item.attr('data-id')}, function(data) {
            $item.remove();
        });
    }
});

通过单击按钮引用li的跨度

2 个答案: