javascript - 如何从此代码创建通用函数以及如何通过 "onclick"按钮操作调用它

Question

我有四个<button> , 每个都有一个特定的 id ( b1 , b2 , b3 , b4 ) 当点击它时, 它会带我到一个特定的 <div>有一个 id ( 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() 相关分区。试试这个:

$('.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>

仅供引用，此技术称为“不要重复自己”或 DRY。