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遍历方法之间的关系，然后执行所需的操作。

使用公共类关联点击处理程序，此处使用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的许多元素

1 个答案: