Question

实际上我的页面上有两个div，带有按钮，我将附带该按钮的隐藏字段传递给jquery函数但是当我点击第二个div时，它传递了第一个div的值。以下是html代码

<div id="polls-42-ans"class="wp-polls-ans">
   <input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
   <input type="hidden" value="42" id="poll-id"> 
</div>

<div id="polls-11-ans"class="wp-polls-ans">
   <input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
   <input type="hidden" value="11" id="poll-id"> 
</div>

我正在使用这个jquery：

$(document).on('click','#vote-btn', function() {
  console.log( $("#poll-id").val()); 
});

注意：Div ID始终不相同

Answer 1

id属性在同一文档中应该是唯一的，如果您使用的是全局类，则会更好：

<div id="polls-42-ans"class="wp-polls-ans">
  <input type="button" name="vote" value="Vote" class="Buttons vote-btn">
  <input type="hidden" value="42" class="poll-id"> 
</div>

<div id="polls-11-ans"class="wp-polls-ans">
  <input type="button" name="vote" value="Vote" class="Buttons vote-btn">
  <input type="hidden" value="11" class="poll-id"> 
</div>

然后使用 siblings 来定位相关字段：

$(this).siblings(".poll-id").val();

希望这有帮助。

$(document).on('click','.vote-btn', function() {
  console.log( $(this).siblings(".poll-id").val() ); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="polls-42-ans"class="wp-polls-ans">
  <input type="button" name="vote" value="Vote" class="Buttons vote-btn">
  <input type="hidden" value="42" class="poll-id"> 
</div>

<div id="polls-11-ans"class="wp-polls-ans">
  <input type="button" name="vote" value="Vote" class="Buttons vote-btn">
  <input type="hidden" value="11" class="poll-id"> 
</div>

Answer 2

以下是有效的javascript代码：

$(document).on('click','#vote-btn', function() {
  console.log( $(this).siblings("#poll-id").val() ); 
});

Answer 3

您可以选择“wp-polls-ans”类的DIV，然后选择里面的按钮

 $(".wp-polls-ans #vote-btn").click(function(){
     var val =  $(this).parent().find( "#poll-id").val();
     alert(val);
   })

This is the fiddle

如何使用jquery区分html元素的ID值

3 个答案: