Question

我有四个<button>，每个人都有一个特定的ID（b1，b2，b3，b4），点击它时，它会将我带到具有ID（<div>，marina1，marina2 ...）的特定ecc。有没有办法不写这个函数四次（一个特定按钮的一个函数）？

就像创建一个带有两个参数作为输入的通用的那样（但我不知道如何将这两个参数传递给函数）？

这是代码：

<script>
    $(document).ready(function (){
        $("#b1").click(function (){
            $('html, body').animate({
                scrollTop: $("#marina1").offset().top
            }, 2000);
        });
    });
</script>

Answer 1

要实现此目的，您可以先使用按钮和div上的公共类对它们进行分组。然后，您可以使用data属性将button元素的相关信息存储在点击处理程序中，以便toggle()相关div。试试这个：

＆＃13;

$('.btn').click(function() {
  $($(this).data('target')).toggle();
});

＆＃13;

.marina {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" id="b1" data-target="#marina1">Marina 1</button>
<button class="btn" id="b2" data-target="#marina2">Marina 2</button>
<button class="btn" id="b3" data-target="#marina3">Marina 3</button>

<div class="marina" id="marina1">Marina 1 details...</div>
<div class="marina" id="marina2">Marina 2 details...</div>
<div class="marina" id="marina3">Marina 3 details...</div>

＆＃13;

仅供参考，这项技术被称为“不要重复自己”或“干”。

Answer 2

是的，还有另一个你可以做到的。您可以为所有id元素添加公共类。试试吧。

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style>
    .click {
      cursor: pointer
    }
  </style>
</head>

<body>
  <span class="click" id="1">1</span><br>
  <span class="click" id="2">2</span><br>
  <span class="click" id="3">3</span><br>
  <span class="click" id="4">4</span>
  <script>
    $(document).ready(function() {
      $(".click").on('click', function() {
        var id = this.id;
        alert(id);
        // code to be executed
      });
    });
  </script>
</body>

</html>

如何从此代码创建通用函数，如何通过“onclick”按钮操作调用它

2 个答案: