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

【问题标题】：Bind click function to different pictures将点击功能绑定到不同的图片
【发布时间】：2018-08-21 18:01:38
【问题描述】：

我有 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>

【问题讨论】：

当您的 html 代码中有 img 标记时，它为什么对第一个 a.links 起作用
这是 a.links 的示例。显然，它现在不起作用，因为我不知道如何将点击功能绑定到我的图片。将“a.links”更改为“img”不起作用。
如果你知道如何找到与a.links匹配的所有元素，你也会知道如何找到类名为.links的所有图像。架构是相同的。但另一方面，这个问题闻起来就像你从某个地方复制代码，并在不理解代码的情况下使用它。
“将“a.links”更改为“img”不起作用”在这种情况下“不起作用”是什么意思，因为使用img 作为选择器是一种可能的答案……
顺便说一句：img 元素没有href-attribute;

标签： jquery html css-selectors

【解决方案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>

【讨论】：

【解决方案2】：

您可以在data-div-idattribute 中设置相关的 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>

【讨论】：

【解决方案3】：

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

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

【讨论】：