我需要将数据从 id 属性变量传递到 href 属性以完成 href 路由答案

【问题标题】：I need to pass through data from an id attriubute varible to an href attribute to complete the href route我需要将数据从 id 属性变量传递到 href 属性以完成 href 路由
【发布时间】：2021-04-08 06:37:13
【问题描述】：

我想看看是否有人知道如何将 id 变量从另一个标签传递到同一标签 os 中的另一个属性。我只是想在用户删除另一个用户之前添加一个弹出模式供用户确认。

   <a class="deleteUserBTN btn btn-outline-danger col-3" data-id="<?php echo $row['id']; ?>" title="Add this item" href="#deleteUserModal">Delete User</a>

<!-- Delete User Modal -->
    <div class="modal" id="deleteUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>
              </div>
              <div class="modal-body">
                  <h4>Are you sure you want to Delete this User?</h4>
                  <input type="text" id="user" />
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  <a type="button" class="btn btn-danger" id="user" href="delete_user.php?delete=">Delete</a>
              </div>
          </div> 
        </div>
    </div>
    <!-- End Delete User Modal -->

<script>
        $(document).on("click", ".deleteUserBTN", function (e) {
            e.preventDefault();
            var _self = $(this);
            var userID = _self.data('id');
            $("#user").val(userID);
            $(_self.attr('href')).modal('show');
        });
</script>

我只能传递用户 ID 并将其显示在模式内的标记中。但我正在尝试将数据/id 传递给（删除模式内的 btn）中的 href 以完成路由。我希望 href 读取如下内容：

href="delete_user.php?delete=36"

有什么想法吗？谢谢。

【问题讨论】：

$('#deleteUserModal a').attr('href', "delete_user.php?delete=" + userID);
欢迎来到 Stack Overflow。请提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example

标签： javascript php html jquery bootstrap-5

【解决方案1】：

您有两个带有id="user" 的元素，所以给链接一个不同的ID，您可以使用prop('search')

$(document).on("click", ".deleteUserBTN", function(e) {
  e.preventDefault();
  var _self = $(this);
  var userID = _self.data('id');
  $("#delete_link").prop('search', 'delete=' + userID);
  // log in console for demo only
  console.log($("#delete_link").prop('href'))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="deleteUserBTN btn btn-outline-danger col-3" data-id="55555" title="Add this item" href="#deleteUserModal">Delete User</a>

<!-- Delete User Modal -->
<div class="modal" id="deleteUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <h4>Are you sure you want to Delete this User?</h4>
        <input type="text" id="user" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <a type="button" class="btn btn-danger" id="delete_link" href="delete_user.php?delete=">Delete</a>
      </div>
    </div>
  </div>
</div>
<!-- End Delete User Modal -->

【讨论】：

【解决方案2】：

哇，你肯定让这件事变得复杂了。您可以将参数传递给同一页面上的 javascript，也可以将其传递回服务器。方法如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>href</title>
 </head>

 <body>
    <a id='myHref' href="delete_user.php?del=36">click here</a>
 </body>

 <script>
     document.getElementById("myHref").addEventListener("click", displayAttribute, false);

     function displayAttribute(event) {
       event.preventDefault();
       let url = event.target.href;
       
       let params = (new URL(url)).searchParams;
       let del = params.get('del');
       console.log(del);

/*****************************************************
  this line redirects you to delete_user.php
*****************************************************/

       location.href = new URL(url);
    }
</script>

请务必保留登录 chrome 开发人员工具。

这是 php 脚本：

<?php
   print_r($_GET);
?>

【讨论】：