Jquery插件无法正常工作!

时间:2011-05-09 15:40:04

标签: jquery html jquery-plugins jquery-selectors

Hello Guys!

我一直在尝试使用Jquery创建一个很酷的Image Slider!我创建了它的框架,但我开始介绍创建插件的基础知识。我的以下代码似乎根本不起作用!任何人都可以建议我哪里出错了?

<html>
      <head>
             <title>Content Slider</title>
             <script src="jquery-1.5.2.min.js"></script>
             <script src="ajax.jquery.1.8.11.js"></script>
             <script src="img.slider.plugin.js"></script>
             <script>

              jQuery.fn.imgSlider = function () {
                var element = this;
                var imgArray = [];
                $(element+" img").each(function() {
                    var imgId = $(this).attr("id");
                    var imgDesc = $(this).attr("desc");
                    var imgSrc = $(this).attr("src");
                    imgArray.push({
                                   'id':imgId,
                                   'desc':imgDesc,
                                   'src':imgSrc
                                  });
                });
                $.each(imgArray,function( i, v ){
                    element.append($( "<p> Image ID - " + v.id + " | Image Desc - " + v.desc + " | Image Source - " + v.src + "</p>" ));
                });
              }

              $(document).ready(function () {
                    $('div.frame').imgSlider();
              });
             </script>
      </head>
      <body>
             <div class="frame">
                   <img id="1" desc="This Image One!" src="bg-1.jpg" />
                   <img id="2" desc="This Image One!" src="bg-2.jpg" />
                   <img id="3" desc="This Image One!" src="bg-3.jpg" />
                   <img id="4" desc="This Image One!" src="bg-4.jpg" />
                   <img id="5" desc="This Image One!" src="bg-5.jpg" />
             </div>
      </body>
</html>

感谢提前

1 个答案:

答案 0 :(得分:2)

问题在于var element = this;$(element+" img")

this引用当前的jquery对象。它不是要连接的字符串。

使用

$("img", element).each(function(){/*your code here*/})

第二部分。


如果您想在页面中放置多个滑块,则更有用

element.each(function(){
   $('img', this).each(function(){/*your code here*/});
})