Question

我在jQuery中有20个函数，其中一个可以做，使div向下滑动并再次向上移动。

我的问题是：

如何更改此代码以便它使用命名函数，因此我可以在某处获得更多功能。是否可以使用名称将代码缩减为一个函数？

$('#top1').click(function() {
      $('#book3').slideDown('slow', function() {
        // Animation complete.
      });
    });
    $('#luk3').click(function() {
      $('#book3').slideUp('slow', function() {
        // Animation complete.
      });
    });

    $('#top2').click(function() {
      $('#book4').slideDown('slow', function() {
        // Animation complete.
      });
    });
    $('#luk4').click(function() {
      $('#book4').slideUp('slow', function() {
        // Animation complete.
      });
    });

我功能更强，但不会全部写完。

<div id="top3">
Opdater Password til absb.dk
</div>
<div id="book5">
    <h5>Updater adgangskode</h5>
    <form action="#" method="post">
    <table>
            <tr>
                <td>Adgangskode</td>
                <td><input type="password" name="pass" class="new"></td>
            </tr>
            <tr>
                <td>Adgangskode gentag</td>
                <td><input type="password" name="gentag" class="new"></td>
            </tr>
            <tr>
                <td><input type="submit" name="opdater_pass" value="Opdater" class="new upload_boxxen"></td>
                <td></td>
            </tr>
        </table>
        <?php
        if(isset($_POST["opdater_pass"]))
        {
            $updater_pass = $mebe->updater_pass();
        }
        ?>
    </form>
    <div id="luk5">
        Luk
    </div>
</div>

这是我的一些内容

Answer 1

如果我认为我正确理解了您的问题，您可以为每个div添加一个类，然后让您的点击功能查看。

例如，您可以将以下内容作为div：

<div id="top3" class="slider_toggle">Opdater Password til absb.dk</div>

然后，您可以更新您的jQuery以使用该类，然后获取所点击的div的ID并按照您的意愿滑动该div：

$('.slider_toggle').click(function () {
    $(this).slideUp('slow', function () {
        alert("slide is complete");
        // Animation complete.
    });
});

我为你提供了一个工作的JS小提琴，看看我是怎么做到的： http://jsfiddle.net/BhuKM/

Answer 2

我认为你要求减少代码量，这样你就不需要为每个ID都有一个函数。

首先，您可以将代码缩减为：

$('#top1, #top2, #top3').click(function() {
  $(this).next().slideDown('slow', function() {
    // Animation complete.
  });
});

$('#luk1, #luk2, #luk3').click(function() {
  $(this).parent().slideUp('slow', function() {
    // Animation complete.
  });
});

然后我尝试给每个'top'和'luk'一个班级，所以你可以使用：

$('.top').click(function() {
  $(this).next().slideDown('slow', function() {
    // Animation complete.
  });
});

$('.luk').click(function() {
  $(this).parent().slideUp('slow', function() {
    // Animation complete.
  });
});

更多具有相同名称的价值

2 个答案: