javascript - JQuery Popup 仅适用于一个项目

Question

我的表中至少有 10 个条目来自 mysql 数据库。每行都有一个按钮。单击该按钮时，将显示一个带有文本字段的弹出窗口。这个想法是在弹出窗口中输入该项目的出价。

该脚本正在运行，但仅适用于第一个元素，不适用于其余元素。我怎样才能动态地做到这一点？

代码如下:

$(document).ready(function(){
	$("#show").click(function() {
	  $("#popup").show();
	});

	$("#close, #submit").click(function() {
	  $("#popup").hide();
	});
});

#popup {
  position: relative;
  z-index: 100;
  padding: 10px;
}

.content {
  position: absolute;
  z-index: 10;
  background: #ccc;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 5;
  opacity: 0.4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" style="display: none;">
    <div class="overlay"></div>
    <div class="content">
      <header>
        <div id="close">✖</div>
      </header>
      <form name="form1" method="post" action="bid.php">
        <fieldset>
          <label for="bid">Bid</label>
		  <input type="text" name="bids[]" id="bids[]" size="8"/>
          <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
        </fieldset>
		<footer>
			<button type="button" id="submit">Bid Now</button>
      </footer>
      </form>
    </div>
  </div>

 /*This is how I trigger the popup. It is an example for one item but all the rest have the same composition*/

<td><button id="show"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>

Answer 1

Id 每个元素都需要唯一，这就是您代码中的问题。像这样将 id 转换为 class:-

$(document).ready(function(){
    $(".show").click(function() {
      $("#popup").show();
    });

    $("#close, #submit").click(function() {
      $("#popup").hide();
    });
});

按钮代码如下:-

<td><button class="show"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>

工作片段:- https://jsfiddle.net/3u2jL2rh/