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

Question

我想看看是否有人知道如何将 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 并将其显示在模式内的标记中。但我试图将 data/id 传递给（删除模式内的 btn）中的 href 以完成路线。我希望 href 阅读如下内容：

href="delete_user.php?delete=36"

有什么想法吗？谢谢

Answer 1

你有两个元素 id="user" 所以给 link 一个不同的 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 -->

Answer 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);
?>

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

I need to pass through data from an id attriubute varible to an href attribute to complete the href route

html

javascript

php

jquery

bootstrap-5