jQuery扩展方法带参数?

时间:2013-09-10 16:00:01

标签: jquery html extend

使用以下jQuery:

jQuery.fn.extend({
    resizelis: function(xWidth) {
      var mButtons = this.length;
      var buttonSize = (xWidth / mButtons);
        return this.each(function() {
            this.css("width", buttonSize + "px");
            this.children("a").css("width", buttonSize + "px");
        });
    }
});

我使用这样的方法:

var $width = $window.scrolltop() > $("#header_image").outerHeight() ? .92 * $(window).width() : .92 * $(".content").width();
$(".menu").children("li").resizelis($width);

HTML

<ul class="menu">
    <li class="current"><a accesskey="1" href="index.html">Home</a></li>
    <li><a accesskey="2" href="highlights.html">Highlights</a></li>
    <li><a accesskey="3" href="agenda.html">Agenda</a></li>
    <li><a accesskey="4" href="tracks.html">Tracks</a></li>
    <li><a accesskey="5" href="sponsors.html">Sponsors / Exhibits</a></li>
    <li><a accesskey="6" href="travel.html">Travel</a></li>
    <li><a accesskey="7" href="register.html">Register</a></li>
</ul>

但这给了我一个错误。我究竟做错了什么?感谢。

1 个答案:

答案 0 :(得分:1)

在调试代码时,我发现在extend方法中你使用this而不是$(this),并尝试将css方法与this一起使用,这不是jQuery宾语。尝试将this更改为$(this),然后重试:

jQuery.fn.extend({
    resizelis: function(xWidth) {
      var mButtons = this.length; //same as with the jquery object $(this)
      var buttonSize = (xWidth / mButtons);
        return $(this).each(function() 
       {
            $(this).css("width", buttonSize + "px");
            $(this).children("a").css("width", buttonSize + "px");
        });
    }
});

each循环内,thisHTMLLIElement,要使用css方法,请使用$(this)