Question

我有两个功能，我希望根据屏幕宽度调用它们。

这就是我的尝试：

var winWidth = $(window).width();

var sections = function() {
    $('.image').each(function(){
       var $this = $(this),
        x = $this.find('img').width()
        $this.width(x);
     });
};

var sectionsMobile = function() {
     $('.image').find('img').css({
           'height': 'auto',
            'width': '100%'
         });
};

function checkSize() {
  if (winWidth >= 800) {
      sections();
    }   else {
      sectionsMobile();
  }
}
jQuery(window).on('load resize', checkSize);

当页面加载时，它可以工作并应用CSS。但是，800px边界之间的大小调整不会在函数之间切换。

此处完整演示：http://codepen.io/sol_b/pen/PzgdWy

任何帮助都非常感激。

Answer 1

第一行是永久缓存的：

    $("#table_resultados").on("change",".prueba", function () {});

只需将其移至var winWidth = $(window).width();函数内。

Answer 2

试试这个：

$(window).on("load resize",function(){

    if($(this).width() >= 800 )
        sections();

    else
        sectionsMobile();

});

Answer 3

添加：

(window).resize(function() {
 if (winWidth >= 800) {
      sections();
    }   else {
      sectionsMobile();
  }
});

如何根据屏幕宽度调用功能？

3 个答案: