Question

尝试将边框宽度更改为窗口宽度。得到这个代码：

jQuery(window).ready(function($) {  

    var windowWidth = $('#portfolio_title .container').outerWidth();

    $('.topBorder').css({'border-right-width':(windowWidth)+'px'});
    $('.btmBorder').css({'border-left-width':(windowWidth)+'px'});

    $(window).resize( function(){
        var windowWidth = $('#portfolio_title .container').outerWidth();
        $('.topBorder').css({'border-right-width':(windowWidth)+'px'});
        $('.btmBorder').css({'border-left-width':(windowWidth)+'px'});
    });
});

但它不漂亮试图像这样优化它：

jQuery(document).ready(myWidth);

jQuery(window).resize(myWidth);

function myWidth($){
    var windowWidth = $('#portfolio_title .container').outerWidth();

    $('.topBorder').css({'border-right-width':(windowWidth)+'px'});
    $('.btmBorder').css({'border-left-width':(windowWidth)+'px'});
};

文档准备就绪，但调整大小没有。我做错了什么？

Answer 1

文档就绪处理程序接收jQuery对象作为第一个参数，其中resize处理程序接收事件对象作为参数。

因此，当resize事件调用myWidth时，$引用resize事件而不是jQuery对象。

您可以通过注册调整大小处理程序然后在dom上手动触发处理程序来修复它，如下所示

jQuery(function ($) {
    $(window).resize(function () {
        var windowWidth = $('#portfolio_title .container').outerWidth();
        $('.topBorder').css({
            'border-right-width': (windowWidth) + 'px'
        });
        $('.btmBorder').css({
            'border-left-width': (windowWidth) + 'px'
        });
    }).resize();
});

Answer 2

试试这个：

var windowWidth = $('#portfolio_title .container').outerWidth();
$(function() {  
    $('.topBorder').css({'border-right-width':(windowWidth)+'px'});
    $('.btmBorder').css({'border-left-width':(windowWidth)+'px'});

    $(window).resize( function(){
        $('.topBorder').css({'border-right-width':(windowWidth)+'px'});
        $('.btmBorder').css({'border-left-width':(windowWidth)+'px'});
    });
});

Answer 3

您无法将$传递给myWidth并期望它为jQuery。在myWidth $中将是一个事件对象。这将使$ jQuery为您而不用担心冲突。

(function($, window, document){

  jQuery(document).ready(myWidth);

  jQuery(window).resize(myWidth);

  function myWidth(){
      var windowWidth = $('#portfolio_title .container').outerWidth();

      $('.topBorder').css({'border-right-width':(windowWidth)+'px'});
      $('.btmBorder').css({'border-left-width':(windowWidth)+'px'});
  }; 

})(jQuery, window, document);

jQuery调整窗口宽度noconflict模式

3 个答案: