多个元素的淡入淡出

debugcn 发表于 Dev

infox09

请我想为每个按钮应用fadeToggle，但不适用于此方法，我尝试与此应用如何如何在jquery选择器中使用javascript变量但未成功

这是代码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>

如果还有另一种方法可以做到这一点，请。

萨帕尔

您可以利用元素和可用于目标元素的各种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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。