根据可见数量更改div的大小

Question

我需要一些帮助来改变div的大小，具体取决于可见的数量。

到目前为止，有两件事没有用。我想做的第三件事我甚至不确定怎么写。这是JSfiddle。

首先，我甚至无法正确计算出现在可见的数量。我认为这样可行：

var count = $('.box:visible').length;

alert(count);

但无论有多少可见，它每次都会变为零！

其次，我需要根据可见数量来改变div的宽度。如果计数器工作正常，这可能有用吗？就像现在一样，它们都是30％宽。

$('p').click(function() {
  if count = 1 {
    $('.box:visible').css('width', '70%');
  } else if count = 2 {
    $('.box:visible').css('width', '40%');
  } else if count >= 3 {
    $('.box:visible').css('width', '30%');
  }
})

如果只有一个是开放的，我希望那个宽70％。如果两个是开放的，它们都应该是40％宽。如果超过三个是开放的，它们应该都是30％宽！

而且，在我的JSfiddle中，三个div都在同一列中。所以，这意味着（如果上面的代码工作正常）如果方框1,4和5全部打开，它们都将是30％宽，但是只有两列，所以我实际上希望它们是40％宽！有人可以帮助我的语法吗？我是否只需要写更多if else语句？

非常感谢！

Answer 1

您需要围绕if条件使用括号，并且应该使用===进行比较：if (count === 1) { ... }。此外，每次运行事件处理程序时都需要更新可见框的length，因此将var count = $('.box:visible').length移动到处理程序中。

＆＃13;

＆＃13;

$('p:first-child').click(function() {
  $('#box1').toggle();
})

$('p:nth-child(2)').click(function() {
  $('#box2').toggle();
})

$('p:nth-child(3)').click(function() {
  $('#box3').toggle();
})

$('p:nth-child(4)').click(function() {
  $('#box4').toggle();
})

$('p:nth-child(5)').click(function() {
  $('#box5').toggle();
})


$('p').click(function() {
    var count = $('.box:visible').length;
  if (count === 1) {
    $('.box:visible').css('width', '70%');
  } else if (count === 2) {
    $('.box:visible').css('width', '40%');
  } else if (count >= 3) {
    $('.box:visible').css('width', '30%');
  }
})

＆＃13;

* *::before *::after {
  box-sizing: border-box;
  margin: 0;
}

nav {
  width: 90vw;
  height: 10vh;
  margin-bottom: 2vw;
  border: 2px solid red;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
}

nav p {
  cursor: pointer;
}

#container {
  width: 90vw;
  height: 80vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  align-items: left;
  border: 2px solid blue;
}

.box {
  display: none;
  align-self: center;
  width: 30%;
  margin: 2vh 1%;
}

#box1 {
  order: 1;
  height: 96vh;
  background-color: coral;
}

#box2 {
  order: 2;
  height: 100%;
  background-color: darkred;
}

#box3 {
  order: 3;
  height: 20%;
  background-color: moccasin;
}

#box4 {
  order: 4;
  height: 20%;
  background-color: salmon;
}

#box5 {
  order: 5;
  height: 20%;
  background-color: skyblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
</nav>

<div id="container">
  <div class="box" id="box1">
  </div>
  <div class="box" id="box2">
  </div>
  <div class="box" id="box3">
  </div>
  <div class="box" id="box4">
  </div>
  <div class="box" id="box5">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;