Question

我不确定我能做到这一点，但值得一试。

我有一个表，其中至少有10个项目来自Mysql数据库。它们是您可以出价的物品。我们的想法是每一行（因此，每个项目）都有一个按钮，可以点击该按钮输入出价。此按钮将打开一个弹出窗口，其中包含用于输入出价的文本字段和用于提交表单的按钮。

为了识别用户正在竞标的商品，我需要其ID以及出价金额。金额很容易获得，但我在项目ID上苦苦挣扎。

这就是我所拥有的：

$(document).ready(function(){
 $(".show").click(function() {
   $("#popup").show();
   	  var $id = document.getElementsByClassName('show')[0].value;
   	  console.log($id);
   	  $("#jugador").val($id);
 });

 $("#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;
}

<td><button class="show" id="bid" value="<?php echo $row2["id"];?>"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>

/*Popup*/

<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="bidAmount" id="bidAmount" size="8" />
      <input type="hidden" name="item" id="item" />
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
    <footer>
    <button type="button" id="submit">Bid Now</button>
    </footer>
   </form>
  </div>
</div>

我一直试着没有运气。无论我点击哪个按钮，我都会得到第一个元素的项目ID。

我想要的是可行的吗？这是正确的方法吗？我应该使用另一个吗？

提前多多感谢。

Answer 1

只需更改此行：

var $id = document.getElementsByClassName('show')[0].value;

对此：

var $id = $(this).val();

问题在于document.getElementsByClassName('show')[0].value您正在查询第一次出现的.show按钮。使用$(this)代替您将访问当前点击的按钮。

JQuery将事件绑定到附加事件的目标，因此this将始终是对事件目标的引用。使用$(this)将创建目标元素的jQuery对象，允许将jQuery函数应用于元素。

作为旁注，您不应复制元素ID。每个id在html文档中必须是唯一的，因此最好使每个按钮的id不同。

希望它有所帮助。

Answer 2

要访问当前div元素的ID，您可以使用（ $this ），它引用当前的javascript对象。

$("div").click(function(){
 alert($(this).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">Num 1</div>
<div id="2">Num 2</div>
<div id="3">Num 3</div>
<div id="4">Num 4</div>

在这个例子中，我创建了div，当点击时返回该div的id。

Answer 3

当你这样做var $id = document.getElementsByClassName('show')[0].value;时，第一个元素总是会有class="show" 其中包含第一项，因此总是给出第一项的id 所以不要这样做，你可以这样做：

var $id = $(this).val();

这将选择用户点击的当前项目，因此将提供该项目的ID。

使用JQuery提交动态表单

3 个答案: