Question

我使用flexs做一些动作。所以这是目标：当元素＆＃34;三分之一＆＃34; （它以pxl宽度的文本突出显示）达到300px的宽度，它必须添加类，以便元素获得100％的元素宽度。但是，当它获得全宽度时，该函数会重新计算其宽度值，并且元素开始闪烁。请参阅代码段以了解问题。

＆＃13;

function check() {
  var width = $('.one-third').outerWidth();

  if (width < 300) {
    $('.one-third').parent().addClass('to-column')

  } else {
    $('.one-third').parent().removeClass('to-column')

  }
  $('.one-third').text(width)
}

$(document).ready(function() {
  check()
});
$(window).resize(function() {
  check()
});

＆＃13;

body {
  background: #C38D94;
  font-family: 'Arvo', serif;
}


.fbox {
  display: flex;
  flex-flow: row wrap;
  }
.one-half:after, .one-third:after, .one-four:after, .one-five:after, .one-six:after {
  position: absolute;
  top: 0;
  right: 0;
}
.one-half:after {
  content: '2';
}
.one-third:after {
  content: '3';
}
.one-four:after {
  content: '4';
}
.one-five:after {
  content: '5';
}
.one-six:after {
  content: '6';
}
.one-half, .one-third, .one-four, .one-five, .one-six{
  position: relative;
  padding: 30px;
  background: #565676;
  margin: 1px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  
}
.one-half {
  flex: 1 calc(50% - 4px); 
  min-width: 300px;
  }

.one-third {
  flex: 1 calc(30% - 4px);
  
}
.one-four {
  flex: 1 calc(25% - 4px);
  
}
.one-five {
  flex: 1 calc(20% - 4px);
  
}

.one-six {
  flex: 1 calc(15% - 4px);
  
}
.one-third-full {
flex: 1 100%;
}

.to-column {
  flex-flow: column
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fbox dns">   
  <div class="one-third exmpl"></div>
  <div class="one-third exmpl"></div>
  <div class="one-third exmpl"></div> 
</div> 


<div class="fbox"> 
  <div class="one-half"></div>
  <div class="one-half"></div>
</div>
  
 <div class="fbox">  
  <div class="one-third"></div>
  <div class="one-third"></div>
  <div class="one-third"></div> 
</div> 
   
<div class="fbox"> 
<div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
</div>
  
  <div class="fbox"> 
  
  <div class="one-five"></div>
  <div class="one-five"></div>
  <div class="one-five"></div>
  <div class="one-five"></div>
  <div class="one-five"></div>
</div>

<div class="fbox"> 
  <div class="one-half"></div>
  <div class="one-five"></div>
  <div class="one-third"></div>
</div>
  
  <div class="fbox"> 
  <div class="one-four"></div>
  <div class="one-third"></div>
  <div class="one-half"></div>
</div>

<div class="fbox"> 
<div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
</div>

<div class="fbox">
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
</div>
</div>


<div class="truth"></div>

＆＃13;

那么问题如何解决呢？代码here.

Answer 1

更改您的if语句，如下所示。

if (width < 300 && !$('.one-third').parent().addClass('to-column').hasClass('to-column')) {
   $('.one-third').parent().addClass('to-column')
}

小提琴链接：http://jsfiddle.net/azim101/8xkf8ntg/

希望这会对你有所帮助。

如果事件到达＆＃34;如果＆＃34;声明？

1 个答案: