许多元素的 fadeToggle

Question

我想为每个按钮应用 fadeToggle，但它不适用于这种方法，我尝试用这种方法应用 How to use javascript variables in jquery selectors 但没有成功

这是代码 HTML

   <div id="ajouter" class="dropdown">
        <ul>
            <li>
                <button class="projetbutton">Projet</button>
                <form class="projet" style="display:none">
                    <input type="text" />
                    <input type="submit" />
                </form>
            </li>

            <li>
                <button class="famillebutton">Famille</button>

                <form class="famille" style="display:none">
                    <input type="text" />
                    <input type="submit" />
                </form>
            </li>
        </ul>
    </div>

这是为按钮应用的脚本

 <script>
var classElement = ["projet", "famille"];
var button = "button";
for (var i = 0; i < classElement.length; i++) {
    var classbutton = classElement[i].concat(button);

    $(document).ready(function () {
        $('.classbutton').click(function () {
            $(".classElement[i]").fadeToggle();
        });
    });
}
 </script>

请问有没有其他方法可以完成这项工作。

Answer 1

您可以利用元素与目标元素可用的各种DOM遍历方法之间的关系，然后执行所需的操作。

使用普通的 class 关联点击处理程序，这里使用 classbutton 与元素，然后使用 .next() 获取 form 元素。

$(document).ready(function() {
  $('.classbutton').click(function() {
    $(this).next().fadeToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajouter" class="dropdown">
  <ul>
    <li>
      <button type="button" class="classbutton">Projet</button>
      <form style="display:none">
        <input type="text" />
        <input type="submit" />
      </form>
    </li>

    <li>
      <button type="button" class="classbutton">Famille</button>

      <form style="display:none">
        <input type="text" />
        <input type="submit" />
      </form>
    </li>
  </ul>
</div>

许多元素的 fadeToggle

fadeToggle of many element

javascript

jquery

fade