Javascript 高效的jQuery/JS—避免再次复制粘贴相同的代码&；再一次

我需要写一个高效的代码，以保持它的简单&代码文件小，而且我希望在未来的代码中使用我希望从这里获得的知识

更新：我的示例是浏览器窗口侧的固定“按钮”&如果您单击其中一个按钮，它将带您进入具有相同

ID

的div（查看下面的代码）

---

图像：

//Smooth Scroll Menu Links

jQuery('.div1').on('click', function(e) {
    e.preventDefault();
    jQuery('html,body').animate({scrollTop:jQuery(this.hash).offset().top-100}, 800); 
}); 

//I have to copy-paste it 1000 times & only change the ".div1" to something else

//Note that I need a solution with different class names, not "div1", "div2" etc but e.g "location", "potato", "car" etc.

我的代码示例：

//Smooth Scroll Menu Links

jQuery('.div1').on('click', function(e) {
    e.preventDefault();
    jQuery('html,body').animate({scrollTop:jQuery(this.hash).offset().top-100}, 800); 
}); 

//I have to copy-paste it 1000 times & only change the ".div1" to something else

//Note that I need a solution with different class names, not "div1", "div2" etc but e.g "location", "potato", "car" etc.

---

如何在不为每个div编写相同行的情况下使此代码正常工作？

---

必须有一种方法可以从您单击的项目中获取

class

，然后滚动到具有相同名称

ID

的项目，对吗？或者在这种情况下使用任何其他方法来缩短代码-否则就是复制粘贴大型文件节。

试试这个我希望能与您一起使用：

jQuery('div').on('click', function(e) {
    e.preventDefault();
    jQuery('html,body').animate({scrollTop:jQuery(this.hash).offset().top-100}, 800); 
});

---

请注意：此功能将应用于第页的所有div

尝试此功能，我希望可以与您一起使用：

jQuery('div').on('click', function(e) {
    e.preventDefault();
    jQuery('html,body').animate({scrollTop:jQuery(this.hash).offset().top-100}, 800); 
});

---

注意：此函数将应用于页面中的所有div

您可以为每个按钮赋予一个类，以便捕获所有按钮，而不是通过查看单击按钮的属性转到要滚动到的元素：）

HTML

---

示例：

您可以为每个按钮指定一个类，以便捕获所有按钮，然后通过查看单击按钮的属性转到要滚动到的元素：）

HTML

---

示例：

我认为解决方案不止一个。如果不想修改HTML，则需要一个条件来确定单击的元素是否为“活动”元素：

如果您“可以”修改HTML，明智的做法是向“活动”元素（即按钮）添加一些属性，这样您就知道它们可以滚动页面，或者将它们放在容器中。您添加的属性可能是一个类或任何其他有效属性（我建议使用“rel”，但可能是@Iliya Reyzis发现的“data”，他按类选择并滚动到“data”），然后通过它选择它们：

<div class="div1" rel="mybutton">div1</div>
jQuery("[rel='mybutton']").on('click', function(e) {
    var id = $(this).attr('class');
    var scrollto = $('#' + id);
    e.preventDefault();
    jQuery('html,body').animate({scrollTop:scrollto.offset().top-100}, 800);
});

div1
jQuery（“[rel='mybutton']”）。在（'click'，函数（e）上{
var id=$（this.attr（'class'）；
var scrollto=$（“#”+id）；
e、 预防默认值（）；
jQuery（'html，body'）.animate（{scrollTop:scrollto.offset（）.top-100}，800）；
});

---

希望能有帮助

我认为不止是一个独特的解决方案。如果不想修改HTML，则需要一个条件来确定单击的元素是否为“活动”元素：

如果您“可以”修改HTML，明智的做法是向“活动”元素（即按钮）添加一些属性，这样您就知道它们可以滚动页面，或者将它们放在容器中。您添加的属性可能是一个类或任何其他有效属性（我建议使用“rel”，但可能是@Iliya Reyzis发现的“data”，他按类选择并滚动到“data”），然后通过它选择它们：

<div class="div1" rel="mybutton">div1</div>
jQuery("[rel='mybutton']").on('click', function(e) {
    var id = $(this).attr('class');
    var scrollto = $('#' + id);
    e.preventDefault();
    jQuery('html,body').animate({scrollTop:scrollto.offset().top-100}, 800);
});

div1
jQuery（“[rel='mybutton']”）。在（'click'，函数（e）上{
var id=$（this.attr（'class'）；
var scrollto=$（“#”+id）；
e、 预防默认值（）；
jQuery（'html，body'）.animate（{scrollTop:scrollto.offset（）.top-100}，800）；
});

---

希望能有帮助

您应该为每个div添加一个类并查询它们$（“.scroll元素”）。。如果您想按原样使用它，您可以选择所有具有id的div，并以单词“div”开头。。像$（“div[id^='div']）@IliyaReyzis，如果我把所有的“按钮”放在一个

&如果单击了

div

，那么使用jQuery检索

子div的类（特定按钮）并在我的代码中使用它会怎么样？这有意义吗？然后没有太多的点击事件-只有一个带有类
按钮的
div
。类似这样的吗？谢谢你，伙计！我只是尝试编写类似的代码&jQuery很简短。复制它作为答案&我接受它。你应该为每个div添加一个类并查询它们$（“.scroll元素”）。。如果您想按原样使用它，您可以选择所有具有id的div，并以单词“div”开头。。像$（“div[id^='div']）@IliyaReyzis，如果我把所有的“按钮”放在一个
&如果单击了
div
，那么使用jQuery检索
子div的类（特定按钮）并在我的代码中使用它会怎么样？这有意义吗？然后没有太多的点击事件-只有一个带有类
按钮的
div
。类似这样的吗？谢谢你，伙计！我只是尝试编写类似的代码&jQuery很简短。复制它作为答案&我会接受它。如果
ID-s
与“土豆”、“汽车”或“家”完全不同，我需要一个通用的解决方案，就像
ID
所称的那样。如果
ID-s
与“土豆”、“汽车”或“家”完全不同，我需要一个通用的解决方案，就像
ID
所称的那样。