Question

我想将点击处理程序添加到<a id='3'>。我有一个主div，其中<link-div>被动态添加并显示为列表。我只发布了错误的代码，减去了CSS和其他好东西。我无法弄清楚如何为每个<a>隔离<link-div>。想法是点击并显示隐藏的<div id="hide">，具体取决于它是位于第一个<link-div>还是第二个。

这是fiddle Example

HTML

  <div id="main">
    <div id="link-div">
      <div class="name-div">               
       <a id='1' href='javascript:void(0);' >(11)</a> 
       <a id='2' href='javascript:void(0);'> Apples </a>
       <a id='3' href='javascript:void(0);'>[click to see more]</a>
      <div id="hide">more apples </div>
     </div>
   </div>
  <div id="link-div"> 
    <div class="name-div">               
      <a id='1' href='javascript:void(0);' > (44) </a> 
      <a id='2' href='javascript:void(0);'>  Bats </a>
      <a id='3' href='javascript:void(0);'>[click  to see more]</a>
      <div id="hide"> more bats</div>
    </div>
  </div>

## Javascript

  $("#main div div div").hide(); /*hide 'more apples', more bats'*/ 

  $("#main div div div > a ").click(function() { /* this is where I need help */
   $("#main div div div").toggle();  /*show 'more apples' or 'more bats' */
  });

Answer 1

您不能重复使用ID，它们必须是唯一的。使用类来重复元素。

<div class="name-div">               
   <a class='1' href='javascript:void(0);' > B b</a> 
   <a class='2' href='javascript:void(0);'>  B b </a>
   <a class='toggle' href='javascript:void(0);'>click Me me say world</a>
   <div class="hide"> world</div>
</div>

然后将click处理程序应用于该类，并使用DOM遍历查找要切换的关联元素。

$(".toggle").click(function() {
    $(this).next(".hide").toggle();
});

Answer 2

您尝试访问的div中没有定义锚元素<a></a>

$("#main div div div")会找到<div id="hide"> hello </div>

添加单击处理程序以切换div

HTML

2 个答案: