清理JS代碼混亂

Question

幾個月前，我把我的作品集放在一起，現在我正試圖回去整理代碼，以便於添加新項目等變得更加容易。

我的主要問題是我正在使用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
        });

另外，我被迫在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的解決方案，實際上是一個優先選擇的問題。