1

我有一个我建立的愿望清单。它可以在添加/显示/删除项目时正常工作，但我想更进一步。当我删除一个项目时，我希望它有一个弹出窗口，上面写着“项目 X 已被删除”。

它内置在 HTMLtable中，从foreach.

我的问题：成功删除任何项目后，JS提示只会抓取第一个列出的项目的值。

IE 如果我为任何项目单击删除，它每次都会从第一个项目中回显变量。但是，它每次都会删除正确的。

HTML 

`echo '<tr >
                    <td >
                        '.$shirt_name.'
                    </td>
                    <td>
                        '.$model_number.'
                    </td> 
                    <td style="padding-left:9px;"><div style="height:50px;background-size:contain;" class="'.$shirt_image.'">
                       </div>
                    </td>

        ';              
         ?>
              <? echo '<td>  
              <form action="delete_button.php" method="post">
              <input type="hidden" id="deleteitem" class="testbtn" name="deleteitem" value="'.$delete_shirt. '">
              <input type="submit" id="del_but" value="Remove" class="deleteBtn">
              </form></td>                 
              ';

Javascript 为了简洁起见，我只是想用
class="testbtn"

  <script>
$('.deleteBtn').click(function() {    
var deleteitem = $(".testbtn").val();
alert (deleteitem);
});
</script>`

因此，它只提示列出的第一个值，<tr>而不是我单击的相对值。我如何让它抓住相对价值？我希望我说得足够清楚！

4

5 回答 5

3

尝试这个

<script>
$('.deleteBtn').click(function() {  
var deleteitem = $(this).parent().find('.testbtn').val();
alert (deleteitem);
});
</script>
于 2013-07-23T15:23:51.263 回答
2

列表中的每件衬衫是否都有“删除按钮”表格？如果是这样，那么您可以将 alert() 调用添加到提交按钮，如下所示：

<form>
    <input type="submit" onclick="alert('Click!'); return true;">
</form>
于 2013-07-23T15:23:00.353 回答
1

使用$(this) $(this) 是当前单击的按钮对象。尝试做一个 console.log($(this)) 看看它有什么。如果您需要选择其父行 ID 或其他操作$(this).parent("tr").attr("ID")

希望这可以帮助！*没有双关语

于 2013-07-23T15:17:17.003 回答
1

这是一个模板来展示你应该如何做到这一点。

<script>
$('.deleteBtn').click(function(e) {
   e.preventDefault();
   if (window.confirm("Are you sure you want to delete?")) {
       // do ajax to delete on the server
       $(this).closest("tr").remove();

   }
});
</script>

剖析这条线$(this).closest("tr").remove();

$(this)处理程序内部将返回接收到事件的元素

.closest("tr")会给你第一个匹配选择器的祖先tr

.remove()将删除 dom 节点。

于 2013-07-23T15:18:39.080 回答
0

更新

查看我的代码并查看其他两项并尝试将它们粘在一起。

您确实需要重构此代码，为什么在使用 javascript 执行单击事件时将按钮包装错误的表单。如果你做这样的事情会更好：

<?php
    echo "<tr>
        <td>
            $shirt_name
        </td>
        <td>
            $model_number
        </td> 
        <td style=\"padding-left:9px;\">
            <div style=\"height:50px;background-size:contain;\" class=\"$shirt_image\"></div>
        </td>
        <td class=\"testbtn\" id=\"$model_id\">
            Delete
        </td>";              
?>

 <script>
$('.deleteBtn').click(function() {
var id = $(this).attr('id');

// DO SOME AJAX AND PUT THE ALERT IN THE SUCCESS

alert ('Deleted' + id);
});
</script>
于 2013-07-23T15:18:54.947 回答