javascript - 单击图像时如何运行javascript函数？

Question

我有这个 html:

<ul class="cont_ul4">

<li class="cont_li">
<div class="cont_picture">
<a href=""><img src="1.jpg" width="150" height="225" ></a>
</div>
</li>

<li class="cont_li">
<div class="cont_picture">
<a href=""><img src="2.jpg" width="150" height="225" ></a>
</div>
</li>

</ul>

还有这个函数:

function ajax_request() {
$('#placeholder').html('<p><img class="loader" src="/loader.gif"></p>');
$('#placeholder').load("/test.php?id=1234556");
}

我需要的是当我点击图片时触发这个功能。

使用输入按钮我可以做到这一点:

<input type="button" onclick="ajax_request()" value="Click Me!" />

有什么想法吗？谢谢

Answer 1

给你的图片一个id:

<img id="myImage" src="1.jpg" width="150" height="225" style="cursor:pointer">

然后在 Javascript 中:

$("#myImage").click(ajax_request);

或者如果你想对所有图像运行相同的函数:

$("img").click(ajax_request);

然而，最好为您的图像提供一个 CSS 类，然后使用它。这样您就可以将点击操作限制为特定图像:

<img class="link-image" src="1.jpg" width="150" height="225">
...
<img class="link-image" src="2.jpg" width="150" height="225">

然后:

$(".link-image").click(ajax_request);