使用jquery

Question

我有一个包含自动生成的HTML代码的页面，如下所示：

<span>
<img class="myimage" src="example.jpg"/>
<button onclick="do()">Do something</button>
</span>

<span>
<img class="myimage" src="example2.jpg"/>
<button onclick="do()">Do something</button>
</span>

我尝试了以下jquery代码来检索图像元素并存储在变量中，但它不起作用。有什么建议吗？

function do() {
    var pic = $(this).parent().find(".myimage");
    //do something                      
}

Answer 1

函数this内部指的是窗口对象。

为了使函数有效，每个按钮应该将this（即自身）传递给函数。此外，正如评论中提到的 @ T.J.Crowder ，您不能将do用作函数名称 - 它是reserved keyword。

<span>
<img class="myimage" src="example.jpg"/>
<button onclick="func(this)">Do something</button>
</span>

<span>
<img class="myimage" src="example2.jpg"/>
<button onclick="func(this)">Do something</button>
</span>

function func(ele) {
  var pic = $(ele).parent().find(".myimage");
  //do something
}

或者您可以在处理程序中使用jQuery click event处理程序，您可以使用this来引用所单击的dom元素。

$('.myimage + button').click(function() {
  var pic = $(this).parent().find(".myimage");
  //do something
})

Answer 2

有两个问题：

1. 您不能拥有名为do的功能; do是一个关键字。

函数中的

2. this将是对全局对象的引用，而不是单击的按钮。

修复它：

1. 更改功能名称。

2. 使用on之类的现代技术（然后this将引用按钮）将其连接起来，或者更改onclick属性以将this传递到它并使用第一个参数。

以下是on的示例：

$(".do-something-btn").on("click", function() {
    var pic = $(this).parent().find(".myimage");
    alert(pic.attr("src"));
});

<span>
<img class="myimage" src="example.jpg"/>
<button class="do-something-btn">Do something</button>
</span>

<span>
<img class="myimage" src="example2.jpg"/>
<button class="do-something-btn">Do something</button>
</span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

以下是将this传递给函数的示例：

function doSomething(element) {
    var pic = $(element).parent().find(".myimage");
    alert(pic.attr("src"));
};

<span>
<img class="myimage" src="example.jpg"/>
<button onclick="doSomething(this)">Do something</button>
</span>

<span>
<img class="myimage" src="example2.jpg"/>
<button onclick="doSomething(this)">Do something</button>
</span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>