如何使用具有相同 id 的 div 中的数据更新数据库

Question

我正在尝试使用 Ajax 更新数据库以跳过标准提交并且不刷新页面仅更新结果（条目）

所以，首先我有一个包含一些数据的表，这些数据已经保存到links我的数据库的表中

所以这是我的代码：

第一个链接.php：

<div id="links_list">

  <table border="0" cellspacing="0" cellpadding="0">

    <thead>

      <tr>

        <td>Link</td>

        <td>Posted By</td>

        <td></td>

      </tr>

    </thead>

    <tbody>

      <?php

        $rows = $db->query("SELECT * FROM `links` ");

        $totalLinks = $rows->num_rows;

        if($totalLinks == 0){

          echo "<tr><td colspan='5'><div class='' style='font-size: 16px;color: #F44336;background: #fff;width: fit-content;margin-left: 4px;'><i class='fa fa-meh-o'></i> <b>Error :</b> No LINK Has Been Added Yet.</div></td></tr>";

        } else {

        while ($row = mysqli_fetch_assoc($rows)) {

      ?>

      <tr>

        <td id="links_row" valign="middle">

          <input type="checkbox" id="selectr-link-<?php echo $row['link_id']; ?>" name="select_link[]" value="<?php echo $row['link_id']; ?>" style="float:left;margin-top:3px;">

          <span style="float:left;width:25px;height:20px;margin: 0 3px;text-align:center;font-size: 20px;line-height: 22px;color: #009688;"><?php if($row['link_type'] == "Iframe"){ echo "<i class='fa fa-tv'></i>"; } elseif($row['link_type'] == "Direct"){ echo "<i class='fa fa-globe'></i>"; } ?></span>

          <span class="spanInMobile" style="float:left;height:20px;margin-right:5px;"><?php echo $row['link_url']; ?></span>

        </td>

        <td valign="middle">

          <?php echo $row['posted_by']; ?>

        </td>

        <td valign="middle" class="text-right">

        <?php $id = $row['link_id']; $status = $row['link_status']; if($status == '0'){ ?>

          <span title="Enable" class="disabled-entry" id="enable_link[]" data-id="<?php echo $row['link_id']; ?>"></span>

        <?php } elseif($status == '1'){ ?>

          <span title="Disable" class="enabled-entry" id="disable_link[]" data-id="<?php echo $row['link_id']; ?>"></span>

        <?php } ?>

仅当启用第一行，然后启用第二行...等时，它才有效，但如果您想启用第二行，则在启用第一行之前，它不会工作

我尝试使用each()函数，但我不确定代码是否正确编写

Answer 1

你不能使用相同的 ID 来指向 DOM 中的多个元素，而是使用 CLASS。因此将您的点击事件绑定更改为类而不是 ID例子&nbsp;$(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.enabled-entry').click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var link_id = $(this).attr('data-id');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "../src/ajax/enable_link.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: "post",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {link_id:link_id},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#links_list').html(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });while还在循环后添加此脚本