使用JQuery提交动态竞价表单时如何获取对应商品ID？

你的需求完全可行！目前的问题出在获取商品ID的逻辑上，咱们一步步来修正：

当前方案的问题 #

你代码里的var $id = document.getElementsByClassName('show')[0].value;总是会取第一个带有show类的按钮的value，不管你点的是哪个按钮，这就是为什么始终只能拿到第一个商品ID的核心原因。

修正后的代码实现 #

调整JavaScript逻辑 #

把获取ID的方式改成获取当前点击的按钮的value，用jQuery的$(this)就能直接拿到触发事件的元素：

$(document).ready(function(){
  $(".show").click(function() {
    $("#popup").show();
    // 拿到当前点击按钮的value
    var itemId = $(this).val();
    console.log(itemId);
    // 注意：你的隐藏域id是item，之前的jugador应该是笔误，要对应上
    $("#item").val(itemId);
  });

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

确认HTML隐藏域对应 #

确保你的隐藏域ID和JS里的选择器一致，你的HTML里隐藏域是id="item"，所以JS里要用$("#item").val(itemId)，之前的#jugador是明显的笔误，记得修正。

可选的优化方案（更语义化） #

除了用value存储商品ID，还可以用HTML5的data-*属性，这样代码可读性更强，也更符合语义化规范：

1. 修改按钮的HTML：

<td><button class="show" data-item-id="<?php echo $row2["id"];?>">
    <img src="pictures/bidIcon.png" width="30" height="30">
</button></td>

2. 对应的JS逻辑改成：

var itemId = $(this).data('item-id');

总结 #

当前需求完全可以实现，只需要修正获取当前点击元素的逻辑就行，不需要更换整体方案。上面的两种方法都能解决你的问题，看你更倾向哪种写法~

内容的提问来源于stack exchange，提问作者saysmus