1

嗨,我对此处所述的 jquery 插件文档有点困惑: http ://learn.jquery.com/plugins/basic-plugin-creation/

我的 HTML 标记:

    <ul id="slider1">
        <li><img src="images/slides/slide1.png" alt=""></li>
        <li><img src="images/slides/slide2.png" alt=""></li>
        <li><img src="images/slides/slide3.png" alt=""></li>
    </ul>

我的jQuery脚本:

    $('#slider1').jSlider();

在我的 jakeSlider.js 脚本上(自定义插件)

    (function($){
        $.fn.jSlider = function(){
          var $slidePos = 1;
          var $slideCount = $(this).find('li').length;
          var $next = $(this).find('a'); //FOR MY NEXT TEXT Hyperlink

          $(this).find('li:nth-child(' + $slidePos + ')').css('display', 'block');

          $($next).click(function(){
              $(this).find('li:nth-child(' + $slidePos + ')').fadeOut('slow');
              if($slidePos < $slideCount){
                  $slidePos += 1;
              }else{
                  $slidePos = 1;
              }
              $(this).find('li:nth-child(' + $slidePos + ')').fadeIn('slow');
             });
          };
    }(jQuery));

我的问题:如何访问或迭代 ul 中的列表索引?我的意思是,我将通过插件脚本访问里面的“li”。

4

2 回答 2

0

如果你ul是你的this,那么你会li像这样选择它的元素:

$("li", this)

如果要遍历它们,可以执行以下操作:

$("li", this).each(function(){
    //Do stuff here.
});

编辑 1

我发现您的代码存在一些问题,导致它无法为我工作。

  1. 您正在使用 调用您的插件$('#slider1').jakeSlider();,但您已将您的插件命名为jSlider。但这很容易解决。

  2. 您的示例 HTML 不包含任何a元素,因此此行将永远找不到任何内容:var $next = $(this).find('a');

  3. 由于#2,您处理$next对象点击的逻辑将永远不会触发。

于 2013-11-05T14:47:05.587 回答
0

如果函数的名称是 jSlider$.fn.jSlider = function(){那么你必须使用$('#slider1').jSlider();

于 2013-11-05T14:50:17.500 回答