Javascript 清理JS代码混乱

几个月前我把我的投资组合放在一起，现在我正试图回去清理代码，以便更容易添加新项目等

我的主要问题是，我正在使用Alen Grakalic的Easy Slider Jquery插件来模拟浏览器窗口，每次我想添加一个新的公文包项目时，我都必须添加一个新的代码块，如下所示：

        $("#slider").easySlider({
            controlsBefore: '<p id="controls">Scroll: ',
            controlsAfter:  '</p>',
            prevId: 'prevBtn',
            nextId: 'nextBtn',
            continuous: true,
            prevText: 'Up', 
            nextText: 'Down',
            vertical: true
        });

$（“#滑块”）.easySlider({
控件之前：“
滚动：”，
controlsAfter:“
”，
prevId:'prevBtn'，
nextId:'nextBtn'，
是的，
prevText:'向上'，
下一步：“向下”，
垂直：对
});

此外，我不得不在CSS中添加一大堆新的ID标签和类，如果我有大量的公文包项目，这是不太实际的。所有这些重复的代码似乎真的没有必要，我觉得应该有一个更有效的方法来做到这一点

有没有办法减少添加新滑块所需的代码，这样我就不必添加这么多新的ID标记和JS块？我是否应该跳过插件，转而使用更简单的方法，比如slideUp/slideDown？如果是这样的话，有没有一种方法可以检测图像是否一直滑到底部，并迫使它像这个插件一样跳回到顶部

---

下面是链接：

至少，如果您的滑块都有相同的选项，您可以定义自己的函数来完成滑块的工作：

function makeSlider(id) {
        $("#" + id).easySlider({
            controlsBefore: '<p id="' + id + "_controls">Scroll: ',
            controlsAfter:  '</p>',
            prevId: 'prevBtn' + id,
            nextId: 'nextBtn' + id,
            continuous: true,
            prevText: 'Up', 
            nextText: 'Down',
            vertical: true
        });
        $('#prevBtn'+id).addClass("previousButtonClass");
        $('#nextBtn'+id).addClass("previousButtonClass");
}

等等

---

即使您的滑块不都有相同的选项，您也可以编写一个函数来设置所有基本选项，并允许您传入包含其他选项的对象。

至少，如果您的滑块都有相同的选项，您当然可以定义自己的函数来完成滑块的工作：

function makeSlider(id) {
        $("#" + id).easySlider({
            controlsBefore: '<p id="' + id + "_controls">Scroll: ',
            controlsAfter:  '</p>',
            prevId: 'prevBtn' + id,
            nextId: 'nextBtn' + id,
            continuous: true,
            prevText: 'Up', 
            nextText: 'Down',
            vertical: true
        });
        $('#prevBtn'+id).addClass("previousButtonClass");
        $('#nextBtn'+id).addClass("previousButtonClass");
}

等等

---

即使你的滑块没有相同的选项，你也可以编写一个函数来设置所有的基本选项，并允许你传入一个包含其他选项的对象。

插件返回这个选项。每个选项，那么你能传入一组元素吗

前

$（'.sliders'）.easySlider({
控件之前：“
滚动：”，
controlsAfter:“
”，
是的，
prevText:'向上'，
下一步：“向下”，
垂直：对
});

您必须在属性引用当前.sliders对象而不是#控件之前更改

控件

此外，该插件将
prevId
和
nextId
默认为您正在设置的内容，因此您可以忽略这些内容。
该插件将返回此值。每个值，因此您是否能够传入一组元素

前

$（'.sliders'）.easySlider({
控件之前：“
滚动：”，
controlsAfter:“
”，
是的，
prevText:'向上'，
下一步：“向下”，
垂直：对
});

您必须在

属性引用当前.sliders对象而不是#控件之前更改

控件

此外，该插件将
prevId
和
nextId
默认设置为您正在设置的内容，因此您可以忽略这些内容。
您应该能够使用循环运行其中的每一个

$('.window > div').each(function(index){
  $(this).easySlider({
    controlsBefore: '<p id="controls' + index + '">Scroll: ',
    controlsAfter:  '</p>',
    prevId: 'prevBtn' + index,
    nextId: 'nextBtn' + index,
    continuous: true,
    prevText: 'Up', 
    nextText: 'Down',
    vertical: true
  });
});

$（'.window>div'）。每个（函数（索引）{
$（此）。easySlider({
控件在滚动之前：“
，
controlsAfter:“
”，
prevId:'prevBtn'+索引，
nextId:'nextBtn'+索引，
是的，
prevText:'向上'，
下一步：“向下”，
垂直：对
});
});

至于CSS，你可以简单地给他们每个人一个类和样式
 您应该能够通过一个循环来运行每个循环

$('.window > div').each(function(index){
  $(this).easySlider({
    controlsBefore: '<p id="controls' + index + '">Scroll: ',
    controlsAfter:  '</p>',
    prevId: 'prevBtn' + index,
    nextId: 'nextBtn' + index,
    continuous: true,
    prevText: 'Up', 
    nextText: 'Down',
    vertical: true
  });
});

$（'.window>div'）。每个（函数（索引）{
$（此）。easySlider({
控件在滚动之前：“
，
controlsAfter:“
”，
prevId:'prevBtn'+索引，
nextId:'nextBtn'+索引，
是的，
prevText:'向上'，
下一步：“向下”，
垂直：对
});
});

至于CSS，你可以简单地给他们每个人一个类和样式
 另一种解决方案，假设所有元素都有相同的选项：

var options = {
    controlsBefore: '<p id="controls">Scroll: ',
    controlsAfter:  '</p>',
    prevId: 'prevBtn',
    nextId: 'nextBtn',
    continuous: true,
    prevText: 'Up', 
    nextText: 'Down',
    vertical: true
};

$('#slider').easySlider(options);

var选项={
控件之前：“
滚动：”，
controlsAfter:“
”，
prevId:'prevBtn'，
nextId:'nextBtn'，
是的，
prevText:'向上'，
下一步：“向下”，
垂直：对
};
$（“#滑块”）.easySlider（选项）；

您是想使用此解决方案，还是想使用JacobM的解决方案，这实际上是一个偏好问题。
另一个假设所有元素都具有相同选项的解决方案：

var options = {
    controlsBefore: '<p id="controls">Scroll: ',
    controlsAfter:  '</p>',
    prevId: 'prevBtn',
    nextId: 'nextBtn',
    continuous: true,
    prevText: 'Up', 
    nextText: 'Down',
    vertical: true
};

$('#slider').easySlider(options);

var选项={
控件之前：“
滚动：”，
controlsAfter:“
”，
prevId:'prevBtn'，
nextId:'nextBtn'，
是的，
prevText:'向上'，
下一步：“向下”，
垂直：对
};
$（“#滑块”）.easySlider（选项）；

你是想使用这个解决方案，还是想使用雅各布的解决方案，这确实是一个偏好问题。
哇，这正是我想要的。对css样式有什么建议吗？有没有可能用类替换id标记的方法？给定代码，这似乎会导致控件集中的每个控件都获得相同的
id
，至少可以说这是有问题的。是的，我发现您的解决方案没有进行验证后，就找到了。好的，更改了它，这样您就可以传入id并为控件创建一个id。您能看到一种将类添加到“prevBtn”和“nextBtn”的方法吗？哇，这正是我想要的。对css样式有什么建议吗？有没有可能用类替换id标记的方法？给定代码，这似乎会导致控件集中的每一个控件都获得相同的
id
，至少可以说这是有问题的。是的，我找到了你的解决方案