1

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

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

有没有办法让这个更轻？

解决了...耶！

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

4

3 回答 3

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" });
});
于 2012-10-08T15:13:33.457 回答
1

首先，停止使用 ID 引用所有内容。使用类，像这样：

$('.scrollbtn').hover(function(){
         $(this).css("opacity","0")
             .animate({"opacity":1},500, "linear");
    }, function() {
        $(this).css("opacity","1")
             .animate({"opacity":0},500, "linear");
    });
于 2012-10-08T15:13:40.477 回答
1

我看到你可以做三件事来减少代码：

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

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

这里发生的是：

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

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

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

代码可能如下所示：

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

$('.swing').click(function() { 
    $(this).animate({"left": $(this).data("swingLeft")}, 500, "swing", null);
});
于 2012-10-08T15:18:21.470 回答