1

次のスクリプトがあります。

(function($) {

    $.fn.easyPaginate = function(options){

        var defaults = {                
            step: 4,
            delay: 100,
            numeric: true,
            nextprev: true,
            controls: 'pagination',
            current: 'current' 
        }; 

        var options = $.extend(defaults, options); 
        var step = options.step;
        var lower, upper;
        var children = $(this).children();
        var count = children.length;
        var obj, next, prev;        
        var page = 1;
        var timeout;
        var clicked = false;

        function show(){
            clearTimeout(timeout);
            lower = ((page-1) * step);
            upper = lower+step;
            $(children).each(function(i){
                var child = $(this);
                child.hide();
                if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }

                if(options.nextprev){
                    if(upper >= count) { next.addClass('stop'); } else { next.removeClass('stop'); };
                    if(lower >= 1) { prev.removeClass('stop'); } else { prev.addClass('stop'); };
                };
            });    
            $('li','#'+ options.controls).removeClass(options.current);
            $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);

            if(options.auto){
                if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
            };
        };

        function auto(){
            if(upper <= count){ page++; show(); }       
            else { page--; show(); }          
        };

        this.each(function(){ 

            obj = this;

            if(count>step){

                var pages = Math.floor(count/step);
                if((count/step) > pages) pages++;
                var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>').insertAfter(obj);

      if(options.nextprev){
            prev = $('<li class="prev">prev</li>')
                .appendTo(ol)
                .bind('click', function() {

                    //check to see if there are any more pages in the negative direction
                    if (page > 1) {
                        clicked = true;
                        page--;
                        show();
                    }
                });
        }

                if(options.numeric){
                    for(var i=1;i<=pages;i++){
                    $('<li data-index="'+ i +'">'+ i +'</li>')
                        .appendTo(ol)
                        .click(function(){    
                            clicked = true;
                            page = $(this).attr('data-index');
                            show();
                        });                    
                    };                
                };

        if(options.nextprev){
            next = $('<li class="next">next</li>')
                .appendTo(ol)
                .bind('click', function() {

                    //check to see if there are any pages in the positive direction
                    if (page < (count / 4)) {
                        clicked = true;         
                        page++;
                        show();
                    }
                });
        }

                show();
            };
        });    
    };    

})(jQuery);


    jQuery(function($){
    $('ul.news').easyPaginate({step:4});
    });

これは、ナビゲーション用にこの html 構造を生成するカルーセルのようなプラグインです。

<ol id="pagination" class="pagin"><li class="prev">prev</li><li data-index="1" class="">1</li><li data-index="2" class="">2</li><li data-index="3" class="current">3</li><li class="next stop">next</li></ol>

そして、私が望むのは、このリストを div で囲むことだけです。単純に思えますが、appendTo は私に協力したくないか、何か間違ったことをしています (それが何であるかを理解するのを手伝ってくれれば幸いです..)

だから私はそのように変更しています：

var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>');
var tiv = $('<div id="lala"></div>');
ol.appendTo('#lala');
tiv.insertAfter(obj);

連鎖する方法は知っていますが、「デバッグ」モードで、得られると想像する結果が得られない理由を理解しようとしています。

<div id="lala>
<ol id="pagination><li>...... </li></ol>
</div>

変数のステータスを確認するためにいくつかの console.log を記録しようとしましたが、有用なものを見つけることができませんでした.DOM 挿入で何かが得られなかったと思います。

4

1 に答える 1

2

後者をドキュメントに追加する前に、<ol>要素を追加しています。#lalaこれには何の問題もありませんが、id セレクターを使用していて、ターゲット要素がまだドキュメントの一部ではないため、セレクターは何にも一致しません。

これを修正するには、次のように記述します。

var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>');
var tiv = $('<div id="lala"></div>');
ol.appendTo(tiv);
tiv.insertAfter(obj);

または：

var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>');
var tiv = $('<div id="lala"></div>');
tiv.insertAfter(obj);
ol.appendTo('#lala');
于 2012-06-27T09:12:48.267 に答える