2017-03-02 16 views
1

特定の幅に達すると1回だけ実行する機能があります。jQuery関数はウィンドウ上で一度だけ実行します。サイズ変更

機能は、私は必要なものだけ携帯

上(行と列)テーブルを転置するために使用されます。

1. ON LOAD 
a. if width <992 run transposeTable (mobiles) 
b. if width> 992 do nothing 

2. ON RESIZE 
a. if width <992 run transposeTable ONLY ONCE BUT if loaded page has a smaller width than 992px do nothing (see 1) 
b. if width> 992 run transponseTable ONLY ONCE BUT if loaded page has a width greater than 992px to nothing (see 1) 

(ここでいくつかの変更を加えた)溶液を@Olaf Nankman

のおかげです
var transposed = "desktop"; 
$(document).ready(function(){ 
    if($(window).width() < 992){ 
     transposed = "mobile" 
     transposeTable(); 
    }else{ 
     transposed = "desktop" 
    } 
}) 
$(window).resize(function(){ 
    if($(window).width() < 992 && transposed != "mobile"){ 
     transposed = "mobile" 
     transposeTable(); 
    } 

    if($(window).width() > 992 && transposed != "desktop"){ 
     transposed = "desktop" 
     transposeTable(); 
    } 
}) 
+0

何:ション、そしてあなたは...別の機能をデスクトップに例えば をテーブルを転置する必要があり'if'と' else'に 'transposeTable()'を呼び出すのはどうですか?今あなたが直面している問題は何ですか? –

+0

'var isTransposed = false;' '関数transposeTable(){if(isTransposed)return; isTransposed = true; ... ' –

答えて

1

既にtransposeTable関数を呼び出したことを保存する必要があります私のニーズのための

// Create 2 apart functions, one for mobile, one for desktop 
function transposeTableMobile(){ 
    // Transpose to mobile 
} 
function transposeTableDesktop(){ 
    // Transpose to desktop 
} 

// Create a variable to check if already transposed 
var transposed = "desktop"; 
$(document).ready(function(){ 
    // On page load 
    // Transpose the table 
    // Since this function runs only once, 
    // we don't need to check if the table 
    // is transposed 
    if($(window).width() < 992){ 
     transposed = "mobile" 
     transposeTableMobile(); 
    }else{ 
     transposed = "desktop" 
     transposeTableDesktop(); 
    } 
}) 
$(window).resize(function(){ 
    // On page resize 
    // We check if the table is transposed to mobile, 
    // if not, but should be, transpose it and store that 
    // we transposed the table 
    if($(window).width() < 992 && transposed != "mobile"){ 
     transposed = "mobile" 
     transposeTableMobile(); 
    }else if(transposed != "desktop"){ 
     transposed = "desktop" 
     transposeTableDesktop(); 
    } 
}) 
0

これが助けることができる場合は、作業罰金

var x; 
 
$(window).resize(function() { 
 
    if ($(this).width() <= 600 && (x === 2 || x === undefined)) { 
 
    if(x !== undefined){ 
 
     //function here 
 
     $("body").append('size: small<br/>'); 
 
    } 
 
    x = 1; 
 
    } 
 
    else if ($(this).width() > 600 && $(this).width() <= 1140 && (x === 1 || x === 3 || x === undefined)){ 
 
    if(x !== undefined){ 
 
     //function here 
 
     $("body").append('size: medium<br/>'); 
 
    } 
 
    x = 2; 
 
    } 
 
    else if ($(this).width() > 1140 && (x === 2 || x === undefined)){ 
 
    if(x !== undefined){ 
 
     //function here 
 
     $("body").append('size: large<br/>'); 
 
    } 
 
    x = 3; 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

関連する問題