请告诉我为什么这不起作用！ （基本的jquery）

Question

脚本

 function myfn(){
    var id= jQuery(this).find('input').val();
    alert(id);
  }

HTML

 <div>
   <img src=".." onclick="myfn()" >
   <input type=hidden value=1 >
 </div>

该函数是正确的，但id值显示为undefined。我已经包含了所有必要的apis。

Answer 1

你需要将事件源传递给myfn，你需要接下来而不是find，因为find会查看后代，接下来会看到兄弟姐妹。

Live Demo

的Javascript

 function myfn(obj){
    var id= jQuery(obj).next('input').val();
    alert(id);
  }

在html中

 <div>
   <img src=".." onclick="myfn(this)" >
   <input type="hidden" value="1" >
 </div>

作为补充说明

• 使用input
关闭img和/代码
• 将属性值括在双引号中，例如type和value。

您可以使用jQuery click来绑定事件，而不是您遇到的内联事件绑定。我建议你使用一个类绑定事件，为此你需要将类分配给img。这将使得这个和$（this）在处理程序中可用。

Live Demo

HTML 的

<img src=".." onclick="myfn(this)" class="my-class">

Javacript / jQuery

$('.my-class').click(function() {
    var id = jQuery(this).next('input').val();
    alert(id);
})

Answer 2

另一种选择是：

HTML：

<div>
    <img src="http://placehold.it/120x120&text=image1" id="myimg" />
    <input type="hidden" value="1" />
</div>

JS：

$('#myimg').click(function myfn(){
    var id= jQuery(this).next('input').val();
    alert(id);
});

Live Demo

＆＃13;

＆＃13;

$('#myimg').click(function myfn() {
  var id = jQuery(this).next('input').val();
  alert(id);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="http://placehold.it/120x120&text=image1" id="myimg" />
  <input type="hidden" value="1" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

因为您正在img中搜索输入元素。 您需要在父div或下一个元素中查找该输入元素。

试试这个

function myfn(){
    var id= jQuery(this).closest('div').find('input').val();
    alert(id);
  }