将点击功能绑定到不同的图片

Question

我有6张不同的图片。我想为点击的每张图片显示一个新的div。

目前，我有这个：

<script>
$('a.links').click(function (e){
e.preventDefault();
var div_id = $('a.links').index($(this))
$('.divs').hide().eq(div_id).show();
});
</script>

这适用于"a.links" - 如何将点击功能绑定到我的图片？我需要编辑 jquery 才能完成这项工作：

<img src="HGBai.png" href="#id_of_div" id="link_1" class="links">
<div class="divTable" id="id_of_div">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>

<img src="CHebb.png" href="#id_of_div2" id="link_2" class="links">
<div class="divTable" id="id_of_div2">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>

Answer 1

你可以这样做。

$('img.links').click(function(e) {
var div_id = $(".links").index($(this))
$('.divTable').hide().eq(div_id).show();
});

由于我找不到带有类divs的元素，因此我将其替换为此示例中的divTable

演示

$('img.links').click(function(e) {
var div_id = $(".links").index($(this))
$('.divTable').hide().eq(div_id).show();
});

.divTable{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="HGBai.png" href="#id_of_div" id="link_1" class="links">
<div class="divTable" id="id_of_div">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">1</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>
<img src="CHebb.png" href="#id_of_div2" id="link_2" class="links">
<div class="divTable" id="id_of_div2">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">2</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>

Answer 2

您可以在data-div-id属性中设置相关的div id，并在图像的单击处理程序中读取它以显示它并隐藏所有其他div

注意：href 不是图像标签的相关属性，而是锚标签的相关属性，因此不要使用它

$(function(){
$('img.links').on('click', function(){
var div = $(this).data('div-id'); // get div id
$('.divTable').hide(); // hide all div
$(div).show(); // show relevant div
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="HGBai.png" data-div-id="#id_of_div" id="link_1" class="links">
<div class="divTable" id="id_of_div">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>
<img src="CHebb.png" data-div-id="#id_of_div2" id="link_2" class="links">
<div class="divTable" id="id_of_div2">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>

Answer 3

您可以将 click 事件绑定到元素类：

$('.links').click(function (e){
//your code
});