javascript - 避免在 jquery 按钮的类似任务上重复太多代码

Question

我正在制作一个非常简单的弹出窗口，我可以从 8 种内容中进行选择，所有内容都使用相同的格式。它通过点击隐藏的 div 来工作，这些 div 悬停在顶部部分，当然正如你所看到的，我想出了一个非常长和大的代码来完成一些可能用更少的东西完成的事情 bolt 和电线。

因为有很多行，所以我把所有这些都粘贴到了 jsFiddle

有没有办法让它更轻？

SOLVED... Yeees!

感谢大家...这是最终脚本:jsFiddle Final 以防其他人遇到同样的困难

Answer 1

我看到您可以做三件事来减少代码量:

• 使用悬停快捷方式
• 使用匿名函数
• 使用参数化函数

首先，jQuery 有 hover 替换鼠标悬停/鼠标悬停行为的方法:

$('#scrollbtnR8').bind('mouseover', R8);
$('#scrollbtnR8').bind('mouseout', R8b);

可以替换为

$('#scrollbtnR8').hover(R8, R8b);

虽然代码少了一点:)

---

其次，您现在为每个事件处理程序定义一个函数，但您只使用这些函数一次。如果你只使用它们一次，你可以像这样创建匿名函数:

$('#scrollbtnR1').bind('click', esta1);

成为

$('#scrollbtnR1').click(function() { 
    $("#scrollcontrol").animate({"left":-240},500, "swing", null);
});

---

最后可以用一个函数封装代码中公共(public)的部分，将变化的部分作为参数传递。

你可以这样实现它:

<div id="scrollcontrol" animate="swing" swingLeft="-240">

$('div[animate='swing']').click(function() { 
    $(this).animate({"left": $(this).attr("swingLeft")}, 500, "swing", null);
});

“div”选择器使用 Attribute Equals Selector .您还可以为所有“动画”div 分配一个类，并使用类选择器选择它们:$("div.animate")这将选择所有 <div class="animate"> .

这里发生的是:

• 选择 animate 属性值为“swing”的所有 div。
• 调用 jQuery swing 动画但使用 $(this).attr("swingLeft")作为左边的属性(property)。

attr("wingLeft") 获取 HTML 标记中定义的 swingLeft 属性的值。

此时我不再查看您的代码，关键是:查看要执行的代码，看看您是否注意到一种模式，即您可以概括的东西。然后您或许可以进一步简化代码。
同样值得注意的是:有些人不喜欢向 HTML 添加诸如“animate”、“swingLeft”等属性。 更新 根据 pimvdb 的评论，您可以使用 jQuery data变得更“干净”。

代码可能看起来像这样:

<div id="scrollcontrol" class="swing" data-swingLeft="-240">

$('.swing').click(function() { 
    $(this).animate({"left": $(this).data("swingLeft")}, 500, "swing", null);
});