Question

$("#anch1").click(function() {
    $('html, body').animate({
        scrollTop: $("#mydiv1").offset().top
    }, 1000);
   });

   $("#anch2").click(function() {
    $('html, body').animate({
        scrollTop: $("#mydiv2").offset().top
    }, 1000);
   });

   $("#anch3").click(function() {
    $('html, body').animate({
        scrollTop: $("#mydiv3").offset().top
    }, 1000);
   });

这是一个简单的jquery代码，可以滚动到页面中的特定div，但看起来很长，所以有没有一个简单的方法来编写这个jquery代码？

Answer 1

如果你真的在你的ID结尾使用数字......这可能是一个好主意，然后使用它们！

我建议您使用一个字符将数字与其余字符分开...
下面，我使用了_和.split方法来获取数字这样，您可以拥有多个数字。

＆＃13;

$("#anch_1,#anch_2,#anch_3").click(function() {
  var EndNumber = $(this).attr("id").split("_")[1];
  console.log(EndNumber);
  
  $('html, body').animate({
    scrollTop: $("#mydiv_"+EndNumber).offset().top
  }, 1000);
});

＆＃13;

div{
  height:800px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="anch_1">One</a> <a id="anch_2">Two</a> <a id="anch_3">Three</a><br>
<br>

<div id="mydiv_1">Div #1</div>
<div id="mydiv_2">Div #2</div>
<div id="mydiv_3">Div #3</div>

＆＃13;

作为选择器......如果开头始终相同，例如anch_，则可以使用attribute selector和＆＃34;以＆＃34;开头运营商：^=。

那将是$("[id^='anch_']")，而不是$("#anch_1,#anch_2,#anch_3")。

Answer 2

你可以把它写成循环。

for (var i = 1; i <= 3; i++) {
  $("#anch" + i).click(function() {
    $('html, body').animate({
      scrollTop: $("#mydiv" + i).offset().top
    }, 1000);
  });
}

Answer 3

   function scroll(elementId) {
    $('html, body').animate({
        scrollTop: $(elementId).offset().top
    }, 1000);
   }

   $("#anch1").click(scroll.bind(null, "#mydiv1"));
   $("#anch2").click(scroll.bind(null, "#mydiv2"));
   $("#anch3").click(scroll.bind(null, "#mydiv3"));

Answer 4

由于您在所有这些元素上执行相同类型的功能，因此最好将选择器从html元素的各个ID（例如#anch2和#mydiv1）更改为各自的课程。这样，您就可以立即在所有元素上调用click和animate函数。

Answer 5

试试这个：

$('[id^=#anch]').click(function() {
    var id = $(this).attr("id").split("");
    id = id[id.length - 1];
    $('html, body').animate({
        scrollTop: $("#mydiv" + id).offset().top
    }, 1000);
});

Answer 6

这样的事可能是因为它在所有3上做同样的事情？

function myFunc(eleID) {
    $('html, body').animate({
        scrollTop: $(eleID).offset().top
    }, 1000);
}

for (var i = 1; i <= 3; i++) {
    $("#anch"+i).click(function() {
        myFunc($("#anch"+i));
    });
}

发布后已注意到已经有关于循环和函数的建议

如何编写更好的jquery代码？

6 个答案: