选择正确的变量 php/javascript答案

【问题标题】：Select correct variable php/javascript选择正确的变量 php/javascript
【发布时间】：2018-03-25 15:47:38
【问题描述】：

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

它内置在 HTML table 中，从 foreach 生成变量。

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

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

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> 的值，而不是我单击的相对值。我如何让它抓住相对价值？我希望我已经说得够清楚了！

【问题讨论】：

在点击处理程序中尝试$(this).closest("tr").remove();
我试过了，但没有任何区别。它仍然获取第一个值...
也许 var deleteitem = $(this).prev().val();
您确定要关闭 tr 元素吗？
该项目是否在数据库中被删除并发生页面刷新？

标签： javascript php html-table alert

【解决方案1】：

试试这个

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

【讨论】：

这正是我想要的。你能简单解释一下它在这里做了什么吗？
$(this) 选择被点击的 deletebtn 元素对象，parent() 选择他的 td 父对象，find 找到以 tesbtn 作为其类的元素对象（在最后选择的 td 上下文中）， val() 获取所选 testbtn 的值

【解决方案2】：

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

<form>
    <input type="submit" onclick="alert('Click!'); return true;">
</form>

【讨论】：

【解决方案3】：

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

希望这会有所帮助！ *没有双关语

【讨论】：

$(this).parent('tr') 只会在点击处理程序位于 td 上时匹配某些内容，您可能是指 $(this).parent('td').parent('tr')

【解决方案4】：

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

<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 节点。

【讨论】：

谢谢，但这不是我想要的。如果我在提示上单击“取消”，它仍然会从数据库中删除该项目。
是的……我明白了……你没有做 ajax，这就是它的目的。由于您正在发布传统帖子，因此该页面只是在丢失已删除项目的情况下重新呈现。 JS 跟这个没什么关系……所以再做一些测试。
无论如何我都将不得不使用 AJAX，因为我希望 div 重新加载显示新表而不刷新页面。但现在我一步一步来。我可能也需要帮助，所以请在不久的将来留意！再次感谢 ;-)
@user2118228 无论如何......您的删除查询中有一些错误，所有这些情况下的 javascript 在发布之前运行并且记录被删除，因此此页面上的所有解决方案都有对您所看到的行为没有影响。结果集中缺少的记录是一个副产品，一个干净的页面加载，结果集中少了一条记录。

【解决方案5】：

更新

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

您确实需要重构此代码，为什么当您使用 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>

【讨论】：