Question

在我的应用程序响应中，我使用jquery获取元素位置。它的工作正常。在调整窗口大小时（较大的分辨率为小）它的工作正常，但反过来（小分辨率到大）原来没有反映。

的js

(function ($) {
$(document).ready(function () {

var shareLink = $('#article_tools');
var social_alone = $(".social-share-custom");

if($(window).width() < 1026) {
    var twitter_link = $('.follow_twit');
    var google_link = $('#google_responsive_container');
    twitter_link.before($('.follow_fb'));
    twitter_link.after(google_link);
    google_link.after($('.follow_feed'));
}
 function setHeader(){

    if($(window).width() < 1026){
        var shareLink = $('#article_tools');
        if( shareLink.length > 0){
            shareLink.prepend($(".social-share-custom"));
        }
        else{
            var social_alone = $(".social-share-custom");
            $(".evt_detail_main").before(social_alone);
        }

    }
     var primary=$('#primary');
     var temp=primary.find('>ul>li');
     var srctemp=primary.find(".links");
    if ($(window).width()<768) {
        var search_container =$('#container-search');
        //var temp=$('#primary').find('>ul>li');
        shareLink.prepend($(".social-share-custom"));
        $('.follow-login-wrapper').prepend($('#top-login'));
        $('.responsive-menu').append($("#simplemenu"));
        $('#logo-title').after(search_container);
        $('#homemenu').after(temp);
        $('#comments').before($('#sidebar-right').find('#sidebar-right-inner>#block-constant_contact-0'));
       search_container.after($("#search-box"));
    }
     else {
        srctemp.append(temp);
    }


});
$( window ).resize(function() {
    setHeader();

   });



setHeader();

  });

 })(jQuery);

我对$（window）.width（）＆lt; 768）下的代码没有得到适当的响应，从较小的分辨率调整到大的分辨率。（原始视图没有反映）

Answer 1

(function ($) {
$(document).ready(function () {

var shareLink = $('#article_tools');
var social_alone = $(".social-share-custom");

if($(window).width() < 1026) {
    // ... gets ONLY executed if condition is TRUE
}
 function setHeader(){

    if($(window).width() < 1026){    

        // ... gets ONLY executed if condition is TRUE

    }
     var primary=$('#primary');
     var temp=primary.find('>ul>li');
     var srctemp=primary.find(".links");
    if ($(window).width()<768) {

        // ... gets ONLY executed if condition is TRUE

    }
     else {
        srctemp.append(temp);
    }
});
$( window ).resize(function() {
    setHeader();
   });
setHeader();
  });
 })(jQuery);

问题是，当窗口具有正确的大小时（当时执行函数时，在您的情况下是document.ready），您的函数才会被执行。

试试这个：

(function($) {

    $(document).ready(function () {
        //... include BOTH cases for the document ready event.

            if ($(window).width() < 1200) { ...do something };
            if ($(window).width() < 700) { ...do something else };
    };

    $(window).resize(function () {
        //... include BOTH cases for the window resize event.

            if ($(window).width() < 1200) { ...do something };
            if ($(window).width() < 700) { ...do something else };
    };

})(jQuery);

Jquery在窗口调整大小时无法正常工作

1 个答案: