Question

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

我的主要问题是我使用Alen Grakalic的Easy Slider Jquery插件来模拟浏览器窗口，每次我想添加新的项目组合项时，我都要添加一个新的代码块，如下所示： / p>

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

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

有没有办法减少添加新滑块所需的代码，以便我不必添加这么多新的ID标签和JS块？我应该跳过插件并恢复到像slideUp / slideDown这样简单的东西吗？如果是这样，有没有办法检测图像是否一直滑到底部并强制它像这个插件一样跳回到顶部？

以下是链接：http://richard.designvillain.com

Answer 1

嗯，至少，如果你的滑块都有相同的选项，你当然可以定义自己的功能来做滑块：

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

然后只需致电

makeSlider("slider");
makeSlider("anotherSlider");

等

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

Answer 2

插件返回this.each，所以你能传入一组元素吗？

实施例

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

您必须更改controlsBefore属性以引用当前的.sliders对象而不是#controls。

此外，该插件默认prevId和nextId为您所设置的内容，因此您可以省略这些内容。

Answer 3

你应该能够通过循环遍历每一个。

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

对于CSS，您可以简单地为每个人提供一个类和样式。

Answer 4

另一种假设所有元素具有相同选项的解决方案：

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

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

您是否想要使用此解决方案或JacobM的解决方案，这是一个优先考虑的问题。

清理JS代码混乱

4 个答案: