具有相同ID的jQuery多个按钮[重复]

Posted 2023-05-07

【中文标题】具有相同ID的jQuery多个按钮[重复]

【英文标题】：jQuery multiple buttons with this same id [duplicate]

【发布时间】：2018-08-02 22:14:45

【问题描述】：

我对具有相同 ID 的多个按钮有疑问。当我单击其中一个按钮时，它仅适用于 id=1 （当我在文本字段中输入内容并按任意按钮时，在每种情况下，只会更新 id = 1 的记录）。如何解决这个问题？

div id="ShowPrace">
<?php
try 
  $stmt = $pdo->prepare("SELECT * FROM prace");
  $stmt->execute(array());
  $count = $stmt->rowCount();
  while($row = $stmt->fetch(PDO::FETCH_ASSOC))

?>

  <textarea class="form-control" name="id" rows="1" id="id"><?php echo $ind; ?></textarea>
  <div class="form-group">
    <label for="img">Link do obrazka:</label>
    <textarea class="form-control" name="link" rows="1" id="link"><?php echo $row['img']; ?></textarea>

  </div>
  <div class="form-group">
    <label for="title">Tytuł:</label>
    <textarea class="form-control" name="title" rows="1" id="title"><?php echo $row['title']; ?></textarea>
  </div>
  <div class="form-group">
    <label for="opis">Opis:</label>
    <textarea class="form-control" name="opis" rows="1" id="opis"><?php echo $row['opis']; ?></textarea>
  </div>
  <div class="form-group">
    <button type="submit" id="poprawa" name="poprawa" class="btn btn-primary"> Popraw</button>
</div>
  <?php
    

   catch (\Exception $e) 
      echo "Wystąpił nieoczekiwany błąd!";
  
  ?>

还有 JS：

("#poprawa").click(function()

var link = $("#link").val().trim();
var title = $("#title").val().trim();
var opis = $("#opis").val().trim();
var id = $("#id").val().trim();

$.ajax(
  url: 'update_prace.php',
  type: 'POST',
  data: link:link, title:title, opis:opis, id:id,
  success: function(response)
    if(response == 0)
      alert("error");
    
    else
      alert("Poprawione!");
      location.reload();
    
  
);

);

【问题讨论】：

多个按钮不应该有相同的 id。事实上，多个 html 元素不应该有相同的 Id。更改 id 以使其唯一。

【参考方案1】：

ID 是唯一的，不能重复。您应该在 DOM 中使用 class 并相应地更改您的选择器

HTML：

<button type="submit" name="poprawa" class="btn btn-primary poprawa"> Popraw</button>

JS：

$(".poprawa").click(function()

例如。

【讨论】：

它不工作

@Mysma - 您需要解决其他重复的 id 问题并以不同的方式引用其他字段。

【参考方案2】：

您必须区分 id，因为 id 是唯一的。

你可以这样做：

<?php    
    ...
    $i=0;
    while($row = $stmt->fetch(PDO::FETCH_ASSOC)) 
?>
...
<textarea class="form-control" name="id" rows="1" id="id-"<?php $i ?>>
...
<?php
    
    $i++;    
     catch (\Exception $e) 
       echo "Wystąpił nieoczekiwany błąd!";
    
?>

$i 允许为每个循环更改 id。

【讨论】：

好的，但是，如何在 JS 中捕获每个按钮？例如，如果我拦截 $("#poprawa-1").click.... 它不起作用。

您可以使用 .class 选择器来捕获它们。

@IncredibleHat 当我使用类选择器 js 代码捕获每个按钮返回 id=1 时，例如当我尝试捕获 id=2 或 id=3 的按钮时，js 代码也会返回我id=1。