Question

我已经构建了下面的代码但我不能让它在页面上的多个工作，因为我告诉它所有元素应该在它加载的父选择器内但是当它有2时它完全打破

jQuery.fn.carousel = function(op){ 
 return this.each(function(){
  // merge the options over-top of the defaults
  op = $.extend({
   left_btn:'',
   right_btn:'',
   list:'',
   width:'0px',
   _elements:[],
   _current:0,
   _locked:false
  }, op);

  // check for left_btn if not set throw error
  if(op.left_btn == ''){
   throw "Error jQuery Carousel left_btn not defined";
  }

  // check that width is defined
  if(op.width == '0px'){
   throw "Error jQuery Carousel width not defined";
  }

  // check for right_btn if not set throw error
  if(op.right_btn == ''){
   throw "Error jQuery Carousel right_btn not defined";
  }

  // check for list if not set throw error
  if(op.left_btn == ''){
   throw "Error jQuery Carousel list not defined";
  }

  // set up left button click event
  $(op.left_btn, $(this)).click(function(){
   // check for lock only run if lock is disabled
   if(op._locked == false){
    // activate lock
    op._locked = true;
    // save the currently open view
    var last = op._current;
    // set the current to the next view
    if(op._current == 0){
     op._current = op._elements.length -1;
    }else{
     op._current -= 1;
    } 
    // add the previus element to the beging
    $(".carru").prepend($(op._elements[op._current]));

    $(op._elements[op._current]).css({width:"0px"});

    // set the currently live view to shrink to the left
    $(op._elements[op._current]).animate(
     {
      width:op.width
     },
     1000,
     function(){
      $(op._elements[last]).remove();
      op._locked = false;
     }
    );
   }
  });

  // set up the right button click event
  $(op.right_btn, $(this)).click(function(){
   // check for lock only run if lock is disabled
   if(op._locked == false){
    // activate lock
    op._locked = true;
    // save the currently open view
    var last = op._current;
    // set the current to the next view
    if(op._current == op._elements.length-1){
     op._current = 0;
    }else{
     op._current += 1;
    }

    // add the previus element to the beging
    $(".carru").append($(op._elements[op._current]));

    // set the currently live view to shrink to the left
    $(op._elements[last]).animate(
     {
      width:'0px'
     },
     1000,
     function(){
      $(op._elements[last]).remove();
      $(op._elements[last]).css({width:op.width});
      op._locked = false;
     }
    );
   }
  });

  // save all the li elements to a variable for access later
  $("li", $(op.list, $(this))).each(function(){
   $(this).css({position:'relative'});
   op._elements[op._elements.length] = $(this);
  });


  // set the list to hide overflowing data
  $(op.list, $(this)).css({overflow:"hidden"});

  // empty the list and set the new ul
  $(op.list, $(this)).html("<ul class=\"carru\" style=\"width:999999px;display:block;height:inherit;padding:0;margin:0;\"></ul>");

  // add the first element to the live view
  $(".carru", $(this)).append($(op._elements[0]));
 });
}

Answer 1

也许这一行

$(".carru").append($(op._elements[op._current]));

应该以某种方式将.carru选择器仅限制在插件的当前实例内部。

类似

$(".carru", $(this)).append($(op._elements[op._current]));

同样的事情

$(".carru").prepend($(op._elements[op._current]));

我构建的jQuery插件无法正常工作

1 个答案: