0

我在 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>

这是我的一些内容出来的

4

2 回答 2

0

如果我认为我正确理解了您的问题，您可以为每个 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 fiddle 供您查看，看看我是如何做到的：http: //jsfiddle.net/BhuKM/

于 2013-04-28T12:15:53.543 回答
0

我认为您要求减少代码量，这样您就不需要为每个 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.
  });
});
于 2013-04-28T12:19:50.423 回答