類屬性jQuery中達到特定的寬度後，不會改變

Question

$(window).on('resize', function (event) { 
if ($('body').width() <= 480) { 


      $("circle").attr("cx", 115).attr("cy", 80).attr("r", 70).attr("transform", "rotate(-84, 100, 99)"); 
      $("#skills .row [class*=col-]").toggleClass("col-xs-6 col-xs-12"); 

     } 
} 

我的代碼是應該刪除的屬性，一旦它到達寬度< 480分配給定值，但這是不會發生的時候我檢查元素和設置屏幕尺寸爲iphone 5s（寬度：320px）。我可否知道它沒有改變的原因？我甚至將body.width（）更改爲window.width（），但它不起作用。

Answer 1

既然你連接你的代碼到resize事件，你需要一個調整大小事件發生的代碼運行。加載頁面時不會發生這種情況。您可以刪除resize事件處理程序，並且您的代碼將在頁面加載時運行並查看寬度是否與斷點要求匹配。或者你可以使用一個命名函數（函數聲明）並將其傳遞給事件處理程序。然後調用指定的函數來初始化代碼，然後等待resize事件。

如果您只想一次調用此代碼，並且您不擔心初始頁面加載後視口大小在480px之上和之下變化，那麼您可以擺脫resize處理程序並運行代碼。

如果你想觀察頁面加載後的視口寬度，並希望隨時對它做出反應，它會在480px以上或以下發生變化，那麼你需要做一些類似於我下面的操作。

var $body = $('body'), 
 
    $rows = $('#skills .row [class*=col-]'), 
 
    $circle = $('circle'), 
 
    atOrUnderBreakpoint = false; 
 

 
function onResize(e) { 
 

 
    var $width = $body.width(); 
 

 
    if ($width <= 480 && !atOrUnderBreakpoint) { 
 

 
    $circle.attr({ 
 
     cx: 115, 
 
     cy: 80, 
 
     r: 80, 
 
     transform: 'rotate(-84 100 99)' 
 
    }); 
 
    $rows.toggleClass('col-xs-6 col-xs-12'); // Maybe use addClass() or removeClass() here? 
 

 
    atOrUnderBreakpoint = true; 
 
    console.log(1); 
 

 
    } 
 

 
    if ($width > 480 && atOrUnderBreakpoint) { 
 

 
    // Example. 
 
    $circle.attr({ 
 
     cx: 50, 
 
     cy: 50, 
 
     r: 20, 
 
     transform: '' 
 
    }); 
 

 
    atOrUnderBreakpoint = false; 
 
    console.log(2); 
 
    } 
 

 
} 
 

 
$(window).on('resize', onResize); 
 
onResize(); // Special case, don't wait for resize event this ONE time, apply right away.

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 

 
<svg viewBox="0 0 100 100" width="100" height="100"> 
 
    <circle cx="50" cy="50" r="20" fill="transparent" stroke="hotpink" stroke-width="2" /> 
 
</svg>

以上代碼中的jsfiddle：https://jsfiddle.net/rvmvn1t4/（滑動分頻器側到另一側來改變視區大小）。

我在代碼中看到並使用resize事件的一個問題是使用toggeClass()。 resize被稱爲很多，和col-xs-類將不斷添加/從元素中刪除。這將導致這些元素調整大小/閃爍。這裏的an example使用background-color，注意它在兩種顏色之間閃爍。類似的東西可能會發生在你的元素大小。

我會考慮切換到addClass()或removeClass()，無論你需要什麼，並設置一些東西，防止你的代碼在斷點處應用後運行多次（你知道，防止閃爍等） 。我在我的例子中使用了一個標誌。

Answer 2

你可以使用jQuery resize功能

$('body').resize(function(){  
 
    console.log('body dimension changed'); 
 
    if ($('body').width() <= 480) { 
 
     $("circle").attr("cx", 115).attr("cy", 80).attr("r", 70).attr("transform", "rotate(-84, 100, 99)"); 
 
     $("#skills .row [class*=col-]").toggleClass("col-xs-6 col-xs-12"); 
 
    } 
 
});

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