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

您可以将click事件绑定到您的elements类：

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

Answer 2

您可以这样做。

$('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 3

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

注意：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 个答案: