Question

我正在制作一个非常简单的弹出窗口，我可以从8种类型的内容中进行选择，所有内容都使用相同的格式。它的工作原理是点击悬停在顶部显示的隐藏div，当然你可以看到我想出了一个非常长而大的代码，可以用更少的螺栓和电线来完成

由于我在jsFiddle

中粘贴了很多行

有没有办法让它更轻？

已解决......是的！

感谢所有......这是最终的脚本：jsFiddle Final以防其他人遇到同样的困难

Answer 1

将所有重复行为重构为函数，然后将不同的片段作为参数传递，例如：这样：

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" });
});

Answer 2

首先，停止使用ID引用所有内容。 Use classes, like this：

$('.scrollbtn').hover(function(){
         $(this).css("opacity","0")
             .animate({"opacity":1},500, "linear");
    }, function() {
        $(this).css("opacity","1")
             .animate({"opacity":0},500, "linear");
    });

Answer 3

我认为你可以采取三件事来减少代码：

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

首先，jQuery使用hover方法来替换mouseover / mouseout行为：

$('#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);
});

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

你可以像这样实现它：

<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。您还可以为所有“animate”div分配一个类，并使用类选择器选择它们：$("div.animate")这将选择所有<div class="animate">。

这里发生的是：

选择animate属性值为'swing'的所有div。
调用jQuery swing animate，但使用$(this).attr("swingLeft")作为左侧属性。

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);
});

避免在jquery按钮的类似任务上重复这么多代码

3 个答案: