根據窗口寬度執行jQuery函數

Question

我有一個jQuery函數，當瀏覽器窗口具有最小寬度時，我只想執行該函數（該函數用於在頁面上的內部鏈接之間上下移動時添加平滑滾動效果，但會干擾菜單，我試圖habiliate當寬度小於最小寬度），我幾乎得到它與下面的行，當頁面加載和窗口調整大小時執行，它運作良好，當我傳遞一個小於最小寬度（效果）的子最小寬度（沒有效果），但不是在後退時（從效果到無效果）。就像缺少一些指令一樣，在else語句中刪除前面的代碼或變量，但我不知道是什麼。這裏jQuery代碼：

// the code has 3 detection modes for the width of the browser so it is repeated 3 times 
 

 
$(window).on("load resize",function(){ 
 
    if (self.innerWidth > 996) { //first detection mode 
 
    $('a[href*=#]:not([href=#])').click(function() { 
 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
 

 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
 
     if (target.length) { 
 
      $('html,body').animate({ 
 
      scrollTop: target.offset().top 
 
      }, 1000); 
 
      return false; 
 
     } 
 
     } 
 
    }); 
 
    } 
 
    else { 
 
    // here some instruction that reset values or something that provoke that 
 
    // previous code, loaded when window is > 996 don't be active when window < 996 
 
    } 
 
}); 
 

 
$(window).on("load resize",function(){ 
 
    if (document.documentElement && document.documentElement.clientWidth > 996) { //second detection mode 
 
    $('a[href*=#]:not([href=#])').click(function() { 
 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
 

 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
 
     if (target.length) { 
 
      $('html,body').animate({ 
 
      scrollTop: target.offset().top 
 
      }, 1000); 
 
      return false; 
 
     } 
 
     } 
 
    }); 
 
    } 
 
    else { 
 
    // here some instruction that reset values or something that provoke that 
 
    // previous code, loaded when window is > 996 don't be active when window < 996 
 
    } 
 
}); 
 

 
$(window).on("load resize",function(){ 
 
    if (document.body > 996) { //third detection mode 
 
    $('a[href*=#]:not([href=#])').click(function() { 
 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
 

 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
 
     if (target.length) { 
 
      $('html,body').animate({ 
 
      scrollTop: target.offset().top 
 
      }, 1000); 
 
      return false; 
 
     } 
 
     } 
 
    }); 
 
    } 
 
    else { 
 
    // here some instruction that reset values or something that provoke that 
 
    // previous code, loaded when window is > 996 don't be active when window < 996 
 
    } 
 
});

解決了我！

我解決了這個問題，做了一些必須從初始階段完成的事情，但是我暫時的無知（我正在學習）使得很難看清楚。簡單地說，我將效果限制在id =「content」部分中工作，而不是所有頁面（包括菜單）都是這樣做的，我在第一行指定了這一點。

$('#content a[href*=#]:not([href=#])').click(function() { 
 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
 

 
    var target = $(this.hash); 
 
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
 
     if (target.length) { 
 
     $('html,body').animate({ 
 
      scrollTop: target.offset().top 
 
     }, 1000); 
 
     return false; 
 
    } 
 
    } 
 
});

通過的時間相對浪費，反正我上面定義是真實的，我看到其他職位在這個網站有一個非常類似的問題的內在問題，對不起;當從無效（在小窗口中）傳遞到激活（在大窗口中）時，該效果激活，但在從激活（在大窗口中）傳遞到無效（在小窗口中）時不激活，並且沒有答案。

Answer 1

您有3個函數附加到相同的事件偵聽器。用if語句嘗試一個函數。就像：

$(window).on("load resize",function(){ 
    if (self.innerHeight > 710) { 
    if (document.documentElement && document.documentElement.clientWidth > 996) { 
     console.log("second detection mode"); 
     $('a[href*=#]:not([href=#])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       $('html,body').animate({ 
       scrollTop: target.offset().top 
       }, 1000); 
       return false; 
      } 
      } 
     }); 
     } 
    else { 
     console.log("first detection mode"); 
     $('a[href*=#]:not([href=#])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       $('html,body').animate({ 
       scrollTop: target.offset().top 
       }, 1000); 
       return false; 
      } 
      } 
     }); 
     } 
    } 
    else { 
    console.log("third detection mode"); 
    $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
      $('html,body').animate({ 
      scrollTop: target.offset().top 
      }, 1000); 
      return false; 
     } 
     } 
    }); 
    } 
});