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

我有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'）。单击（函数（e）{
e、 预防默认值（）；
var div_id=$（'a.links'）。索引（$（this））
$（'.divs'）.hide（）.eq（div_id）.show（）；
});

“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>

---

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

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

---

你可以这样做

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

由于找不到类为

divs

的元素，因此在本例中，我将其替换为

divTable

演示

$（'img.links'）。单击（函数（e）{
var div_id=$（“.links”）.index（$（this））
$（'.divTable'）.hide（）.eq（div_id）.show（）；
});
.divTable{display:none}

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

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


$（函数（）{
$（'img.links'）。在（'click'，function（）上{
var div=$（this）.data（'div-id'）；//获取div-id
$（'.divTable'）.hide（）；//隐藏所有div
$（div.show（）；//显示相关div
});
});

当您的html代码中有
img
标记时，它是如何为第一个a.links工作的，这是a.links的一个示例。显然，它现在不起作用，因为我不知道如何将click函数绑定到我的图片。将“a.links”更改为“img”不起作用。如果您了解了如何查找与
a.links
匹配的所有元素，您还将了解如何查找类名为
.links
的所有图像。模式是相同的。但另一方面，这个问题闻起来像是你从某处复制了代码，并在不理解代码的情况下使用了它。“将“a.links”更改为“img”不起作用”在这种情况下“不起作用”意味着什么，因为使用
img
作为选择器将是一个可能的答案…顺便说一句：
img
元素没有
href
-属性；