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

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 。 尝试这个：

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

 .marina { display: none; }

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

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

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 个解决方案

解决方案1
4 2017-02-28 07:54:08

解决方案2
0 已采纳 2017-02-28 08:00:44

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

问题描述

2 个解决方案

解决方案1 4 2017-02-28 07:54:08

解决方案2 0 已采纳 2017-02-28 08:00:44

解决方案1
4 2017-02-28 07:54:08

解决方案2
0 已采纳 2017-02-28 08:00:44