Question

我有一个包含多个（可能是100个）行的表，需要在单击时在表中显示div。生成div并立即跟随行。我一直在尝试下一个推荐并且可以使它工作但它显示所有的div，而不仅仅是紧随其后的那个。

这是我之前加载了jquery的脚本：

<script type="text/javascript">
  $(document).ready(function() {

    $("div.pop_up").css({'display':'none','opacity':'0'})
    $("div.trans").css({'display':'none'})

//this is the code in question
    $("a.trigger").click(   
    function () {
        $(this).parent().next('.pop_up').css({'display':'block'});
        $(this).parent().next('.pop_up').animate({
          opacity: 1
        }, 500);

        $("div.trans").css({'display':'block'});
      }
    )


    $("div.close").click(

      function () {
        $("div.pop_up").css({'display':'block','opacity':'0'});
         $("div.trans").css({'display':'none'});
      }
    )
  });
</script>

这是我的HTML：

<table width="300px" border="0">
    <tr>
       <td><a href="#" class="trigger">View Answers</a></td>
        <td>Exclusive</td> 
       <td>Johnny</td> 
   </tr>
   <tr>
       <td><div class="pop_up" style="background-color:#ccc">
            <div class="close"></div> 

            <p><strong>View Answers: Johnny</strong></p>

            </div></td>
   </tr>

    <tr>
       <td><a href="#" class="trigger">View Answers</a></td>
        <td>Exclusive</td> 
       <td>Bobby</td> 
   </tr>
   <tr>
       <td><div class="pop_up" style="background-color:#ccc">
            <div class="close"></div> 

            <p><strong>View Answers: Bobby</strong></p>

            </div></td>
   </tr>


</table>

Answer 1

您正在选择锚点的父级，即n TD，并且没有.pop_up类的下一个元素。

试试这个：

$(this).parents('tr').next().children('.pop_up')

Answer 2

试试这个（虽然Haven没有彻底测试过）：

 $("a.trigger").click(

 function () {
     $(this).parent().parent().next().find('.pop_up').show();
 });

希望它有所帮助！

点击表格链接显示下一个div

2 个答案: