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/

Answer 2

我只给每个按钮一个唯一的ID并且它工作，然后在每个ID上使用jquery选择器如下所示：

HTML：

<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>

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

JS：

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

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

JQuery Popup仅适用于一个项目

2 个答案: