选择正确的变量 php/javascript

Select correct variable php/javascript

本文关键字：php javascript 变量 选择      更新时间：2023-09-26

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

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

。

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

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

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

试试这个

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

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

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

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

希望这有帮助！ *没有双关

语

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

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

更新

看看

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

你真的需要重构这段代码，为什么当你使用 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>
相关文章：