javascript - 如何使用js从特定链接获取值(value)？

Question

我正在使用 php 从数据库检索数据:

<?php
while($trackResultRow = mysqli_fetch_assoc($trackResult)){?>

  <a onclick="remove()"><span class="glyphicon glyphicon-thumbs-down pull-right"></span></a>
    <li>
     <a href="<?php echo $trackResultRow['track_path']?>">
       <span id="username"><?php echo $trackResultRow['username']?></span> -
       <span id="track"><?php echo $trackResultRow['track_name']?></span>
     </a>
    </li>
   <hr>
<?php
 }
?>

现在，当我单击链接时，它应该获取值并将其传递到 Jquery 函数 (.ajax)，以从表中删除记录，而无需刷新页面。

 function remove()
{
  var username = document.getElementById("username").value;
  var track = document.getElementById("track").value;
  //window.some_variable = '<?=$_GET[user]?>';
  if(username && track)
  {
    $.ajax
    ({
      type:'post',
      url: 'delete_proc_admin.php',
      data: 
      {
         user_name:username,
         user_track:track
      },
      success: function (response) 
      {
       return alert (username +" "+ track);

      }
    });
  }

  return false;
}

但是JQuery函数不起作用。

我想这是因为相同的 ID，但我现在不知道如何修复我的代码。 有人可以帮我解决这个问题吗？

Answer 1

1. 修复无效的 HTML
2. 也使用 jQuery 作为链接
3. 使用数据属性

$(function() { // page load
  $(".rem").on("click", function(e) { // the remove link
    e.preventDefault(); // cancel link
    var $link = $(this), // save for later
      username = $(this).data("username"), 
      track = $(this).data("track");
    $.ajax({
      type: 'post',
      url: 'delete_proc_admin.php',
      data: {
        user_name: username,
        user_track: track
      },
      success: function(response) {
        $link.closest('li').remove();

      }
    });
  });
});

<li>
  <a href="#" class="rem" 
   data-userid="<?php echo $trackResultRow['username']?>" 
   data-track="<?php echo $trackResultRow['track_name']?>">
    <span class="glyphicon glyphicon-thumbs-down pull-right"></span>
  </a>
  <a href="<?php echo $trackResultRow['track_path']?>">
    <span><?php echo $trackResultRow['username']?></span> -
    <span><?php echo $trackResultRow['track_name']?></span>
  </a>
  <hr/>
</li>