javascript - 从表中选择一个

Question

我有一个由用户添加的数据组成的表。所有添加的 都是通过等号按钮添加的。像这样:

<td> 
  <form action="newBet.jsp" method="get">
    <fieldset>
        <input class="button betButton1" id="Won" type="submit" name="W" value="&#10004;"/>

          <div class="closeEarlyForm" style="display:none;">
            <input class="form-control" name="update1" type="number"/>
            <input class="button betButton1" type="submit" name="update" value="Close early"/>
          </div>

       <input class="closeEarlyLink" type="button" value="&#9998; Close early?"/>
    </fieldset>
 </form>
</td>

这很好用。现在，我想添加一些 jquery 来切换隐藏的 div 元素。这就是我遇到麻烦的地方。我似乎无法仅在单击的元素上显示 div 元素。相反，它在所有 td 上显示隐藏的 div 元素。

$(document).ready(function(){
  $(".closeEarlyLink").click(function(e){
    e.preventDefault();
    $(".closeEarlyForm").fadeToggle();
  });
});

我知道我的问题是我选择了该类的所有元素，但我无法弄清楚如何仅切换/选择特定 td 上的隐藏元素。

Answer 1

您可以尝试将 this 关键字与 parent() 和 find() 一起使用:

$(this).parent().find(".closeEarlyForm").fadeToggle();

演示:

$(document).ready(function(){
  $(".closeEarlyLink").click(function(e){
    e.preventDefault();
    $(this).parent().find(".closeEarlyForm").fadeToggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td> 
  <form action="newBet.jsp" method="get">
    <fieldset>
        <input class="button betButton1" id="Won" type="submit" name="W" value="&#10004;"/>

          <div class="closeEarlyForm" style="display:none;">
            <input class="form-control" name="update1" type="number"/>
            <input class="button betButton1" type="submit" name="update" value="Close early"/>
          </div>

       <input class="closeEarlyLink" type="button" value="&#9998; Close early?"/>
    </fieldset>
 </form>
</td>