0

我想将点击处理程序添加到<a id='3'>. 我有一个 main div，其中<link-div>s 被动态添加并显示为列表。我只发布了减去 CSS 和其他好东西的错误代码。我不知道如何隔离它<a>为每个<link-div>. <div id="hide">想法是根据它是位于第一个<link-div>还是第二个来单击并显示隐藏。

这是小提琴示例

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' */
  });
4

2 回答 2

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();
});
于 2013-08-15T05:23:23.503 回答
0

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

$("#main div div div")会发现<div id="hide"> hello </div>

于 2013-08-15T05:21:54.423 回答