jquery弹出窗口只对一个项目起作用

vktxenjb 于 2021-06-20 发布在 Mysql

关注(0)|答案(2)|浏览(301)

我有一个表，其中至少有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>

mysql php jquery JavaScript Popup

来源：https://stackoverflow.com/questions/50464752/jquery-popup-working-for-only-one-item

2条答案

按热度按时间

idfiyjo81#

我只给每个按钮一个唯一的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();
    });
});

赞(0）回复(0）举报 2021-06-20

jv4diomz2#

Id 每个元素需要唯一，这就是代码中的问题。转换 id 至 class 就像this:-

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

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

和按钮代码like:-

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

工作的snippet:-https网址：jsfiddle.net/3u2jl2rh/

赞(0）回复(0）举报 2021-06-20

我来回答

jquery弹出窗口只对一个项目起作用

2条答案

相关问题

热门标签

最新问答