0

私はこのようなさまざまなコードを持っています:

            $(function() {

            $('#slider1').carouFredSel({
                auto: false,
                infinite:false,                 
                circular:false,
                prev:'#prev1',
                next:'#next1',
                pagination:"#pager1",
                mousewheel:true,
                swipe: {
                    onMouse: true,
                    onTouch: true
                }
            });

        $('#slider2').carouFredSel({
                auto: false,
                infinite:false,                 
                circular:false,
                prev:'#prev2',
                next:'#next2',
                pagination:"#pager2",
                mousewheel:true,
                swipe: {
                    onMouse: true,
                    onTouch: true
                }
            });         
        });



      window.addEvent('domready', function(){


    var container = document.id('container'),
    queuedElems = [];

    var sorter = new Fx.Sort($$('#container .sort'), {
    duration: '1000',
    transition: Fx.Transitions.Back.easeInOut,
    mode: 'vertical',
    onComplete: function(){
        displayDOM();
      }
   });

    displayDOM();

    document.id('swap').addEvent('click', function(event){
    event.stop();
    var elems = container.getChildren();
    sorter.swap(elems[0], elems[elems.length - 1]);
  });



    window.addEvent('domready', function(){

    var container = document.id('container2'),
    queuedElems = [];

    var sorter = new Fx.Sort($$('#container2 .sort'), {
    duration: '1000',
    transition: Fx.Transitions.Back.easeInOut,
    mode: 'vertical',
    onComplete: function(){
        displayDOM();
      }
  });

    displayDOM();

    document.id('swap2').addEvent('click', function(event){
    event.stop();
    var elems = container.getChildren();
    sorter.swap(elems[0], elems[elems.length - 1]);
  });

各コードの設定は常に同じで、ID 名 (ID1、ID2...) のみが変更されるため、「省略形」で記述してもらいたいと思います。JavaScriptでこれを行う方法がわかりません（cssのみ）。私が知っている唯一のことは、「var」タグが必要だということです。

少し知識があれば誰でも簡単にできると思います。私は自分で多くの組み合わせを試しましたが、常に失敗しました。例はいいでしょう。難しいですか？

4

2 に答える 2

1

2 つのことを行うことができます: ID を使用して複数の要素を選択する,か、共通のクラスを割り当てます ( .slider)

 $('#slider1, #slider2').carouFredSel({
            auto: false,
            infinite:false,                 
            circular:false,
            prev:'#prev1',
            next:'#next1',
            pagination:"#pager1",
            mousewheel:true,
            swipe: {
                onMouse: true,
                onTouch: true
            }
        });

または設定を変数に保存します

 var mySettings =  {
            auto: false,
            infinite:false,                 
            circular:false,
            prev:'#prev1',
            next:'#next1',
            pagination:"#pager1",
            mousewheel:true,
            swipe: {
                onMouse: true,
                onTouch: true
            }
        };
    $('#slider1').carouFredSel(mySettings);

    $('#slider2').carouFredSel(mySettings);
于 2013-04-08T02:21:21.057 に答える
1

これらすべての要素に共通のクラスを割り当て、プラグインを一度にすべての要素に対して同時に初期化するだけ$('.slider')です$('#slider1')。

于 2013-04-08T02:21:44.950 に答える