Javascript 避免在jquery按钮的类似任务中重复太多代码

我正在制作一个非常简单的弹出窗口，我可以从8种类型的内容中进行选择，所有内容都使用相同的格式。它的工作原理是单击顶部悬停部分显示的hidden

div

s，当然你可以看到，我为一些可能用更少的螺栓和电线就能完成的事情想出了一个非常长和大的代码

因为有很多行，我把这些都贴进去了

有没有办法让这个更轻

解决了。。。Yeees

---

谢谢大家。。。这是最后一个脚本：如果其他人也有同样的困难，请将所有重复的行为重构为一个函数，然后将不同的部分作为参数传入，例如：

function esta1(event) {
    $("#scrollcontrol").animate({"left":-240},500, "swing", null);
}
function esta2(event) {
    $("#scrollcontrol").animate({"left":0},500, "swing", null);
}
...
$('#scrollbtnR1').bind('click', esta1);
$('#scrollbtnL2').bind('click', esta2);

变成这样：

function functionName(event, left) {
    $("#scrollcontrol").animate({"left": left},500, "swing", null);
}
$('#scrollbtnR1').bind('click', function (e) {
    functionName(e, -240);
});
$('#scrollbtnL2').bind('click', function (e) {
    functionName(e, 0);
});

继续此重构过程，直到只剩下一个泛型函数，其他所有内容都将参数传递给该函数

如果发现参数列表变长且不完整，请考虑传递参数对象替代：

function functionName(event, params) {
    $("#scrollcontrol").animate({"left": params.left}, 
        params.duration, 
        params.animation, null);
}
$('#scrollbtnR1').bind('click', function (e) {
    functionName(e, { left: -240, duration: 500, animation: "swing" });
});

---

首先，停止引用ID为的所有内容：

---

我认为可以通过三件事来减少代码：

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

首先，jQuery具有替换mouseover/mouseout行为的方法：

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

可替换为

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

这只是代码少了一点：）

---

其次，现在为每个eventhandler定义一个函数，但这些函数只使用一次。如果只使用一次，可以创建如下匿名函数：

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

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

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

变成

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

---

最后，您可以使用函数封装代码的公共部分，并将更改的部分作为参数传递

您可以这样实现它：

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

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

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

---

为什么不定义一个传递所需变量的函数，引用jquery对象并执行任何操作necessary@HolaSoyEduFelizNavidad回答呢？+1表示希望编写更优雅的代码。@11684我问他为什么不能使用函数，但我认为这可能是有原因的。当然，编写更优雅的代码听起来像是一项codereview任务，而不是一项简单的任务……两件小事：假设OP使用的是jQuery1.8，他可能想使用

.on

而不是不推荐的

.bind

。其次，对于自定义属性，您应该使用

数据swingLeft

（以及可选的

.data（“swingLeft”）

）。

.on

是

.live

的替代品，而不是

.bind

。不过使用是个好主意。不，

.on

是统一的-它取代了

.bind

、

.live

和

.delegate

。我不明白，它只是变得复杂了。。。对于像我这样的新手来说，很多.on.bind.data都是不推荐的东西。请告诉我，在我学会正确的jquery编码之前，我现在所拥有的东西是否能在未来两年内正常工作：）这都是你们的帮助，但我没有领会或理解，只是，我不想占用你们太多的时间。我不会停止我保证我会一直遵循你的建议直到我把它付诸实施：）谢谢s@SamRamSan：pimvdb指出，

.bind（“click”，…

不应再在jQuery 1.8中使用。新函数名为

.on（“click”，…）

。在您的情况下，只需使用

。click（…）

但是。我已更新了要使用的代码。请直接单击。

$（“#scrollcontrol”）

应作为

$传递（此）

或通过使用

e.target

？@SamRamSan在通过jquery绑定事件处理程序时，第一个参数始终是

event

对象。大多数人将此参数命名为

e

，因此它不会遮挡全局

窗口。event

对象。

event

对象的

target

属性是el这是事件的目标，即单击的DOM元素。我尝试过，但现在什么也没有移动，当我让它移动时，它只向左移动了一次，就是这样…@SamRamSan发布了你的新尝试，作为对你的问题的编辑。感谢你的帮助这是最终的代码。非常感谢你所有的优秀帮助谢谢这是最后的代码