调整大小和调用函数

Question

我有这个功能，当你点击html时，它会检查一些元素的宽度并将它与窗口宽度进行比较。我无法让它与调整大小功能一起工作。我想我说错了。

$(document).ready(function() { 
 

 
    $(window).resize(function() { 
 
    var conditionWidth = checkWidth() 
 
    }); 
 

 
    function checkWidth() { 
 
    var elementWidth = 1; 
 
    $("div>div").each(function() { 
 
     if ($(this).width() > $("html").width()/2) { 
 
     elementWidth = 2; 
 
     } 
 
    }); 
 
    return elementWidth; 
 
    } 
 

 
    var conditionWidth = checkWidth() 
 

 
    $("body").off("click").click(function() { 
 
    alert(conditionWidth); 
 
    }); 
 
})

div div { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin-top: 20px; 
 
} 
 
.rectangle1 { 
 
    background-color: black; 
 
    width: 100px; 
 
} 
 
.rectangle2 { 
 
    background-color: red; 
 
    width: 200px; 
 
} 
 
.rectangle3 { 
 
    background-color: black; 
 
    width: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div> 
 
    <div class="rectangle1"></div> 
 
    <div class="rectangle2"></div> 
 
    <div class="rectangle3"></div> 
 
</div>

Answer 1

由于您使用var宣布在调整大小处理程序变量的变量是局部的调整大小处理方法和关闭范围的值（DOM就绪处理）不更新。

$(document).ready(function() { 

    var conditionWidth = checkWidth() 

    $(window).resize(function() { 
     //when you use var it becomes a local variable 
     conditionWidth = checkWidth() 
    }); 

    function checkWidth() { 
     var elementWidth = 1; 
     $("div>div").each(function() { 
      if ($(this).width() > $("html").width()/2) { 
       elementWidth = 2; 
      } 
     }); 
     return elementWidth; 
    } 

    $("body").off("click").click(function() { 
     alert(conditionWidth); 
    }); 
})