Лучший способ сделать горизонтальную панель прокрутки в JQuery?

Question

Я придумал решение ниже.Это прекрасно работает, но мне любопытно узнать, есть ли более эффективный способ сделать это.Спасибо!

HTML:

<div id="magic-pane" style="width: 300px; height: 400px; background: #eee; overflow: hidden">
    <div id="scroller" style="width: 600px; height: 100%; left: 0px; position: relative">
        <div id="pane1" style="width: 300px; height: 100%; background: #efe; float: left">
            <span id="pane1-clicker">Whee, click me!</span>
        </div>
        <div id="pane2" style="width: 300px; height: 100%; background: #fee; float: left">
            <span id="pane2-clicker">Whoosh! Click me!</span>
        </div>
    </div>
</div>

Скрипт:

$(document).ready(function() {
    $('#pane1-clicker').click(function() {
        $('#scroller').animate({ left: '-300px' }, 500);
    });
    $('#pane2-clicker').click(function() {
        $('#scroller').animate({ left: '0' }, 500);
    });
});

Таким образом, по сути, волшебная панель - это небольшой видовой экран шириной 300 пикселей.Внутри находится скроллер, который в два раза шире и содержит два элемента рядом друг с другом.Довольно просто, но опять же, просто интересно, есть ли более эффективный способ кодирования этого.

Демо

Answer 1

Когда число минимально, вам не о чем беспокоиться.Как и в вашем случае, 2 довольно управляемо.Обратите внимание: вы пишете отдельную функцию onClick для всех панелей, что создаст проблему.

Но по мере роста числа, скажем, 50, вам придется писать различные функции onClick $('#pane1-clicker').... $("#pane50-clicker), что крайне неэффективно.Вы должны изменить свой сценарий, чтобы поддерживать любое количество панелей, без написания дополнительных кодов.

• Кроме того, расширьте функцию, чтобы она могла использоваться в качестве плагина.
• Это будетбыло бы лучше, если бы плагин мог соответствовать определенному селектору и назначать связанные позиции как left:300px

Answer 2

Из вашего текущего кода единственное, что я, вероятно, изменил бы сразу же, это вытащил $('#scroller') из двух обработчиков click в замыкание. Таким образом, обработчикам не нужно выбирать его каждый раз, когда происходит щелчок.

var $scroller = $('#scroller');
$('#pane1-clicker').click(function() {
    $scroller.animate({ left: '-300px' }, 500);
});
$('#pane2-clicker').click(function() {
    $scroller.animate({ left: '0' }, 500);
});