为什么在这种情况下toggleClass不起作用？

Question

我已经写了一些代码，但是它不起作用。

有人可以指出我的错误吗？也许我在选择正确的元素时遇到问题？

我已经写了一些代码，但是它不起作用。

有人可以指出我的错误吗？也许我在选择正确的元素时遇到问题？

我已经写了一些代码，但是它不起作用。

有人可以指出我的错误吗？也许我在选择正确的元素时遇到问题？

function toggle(x) {
  $("#content div:nth-child(" + x + ")").toggleClass("change"); 
  $("#content div img:nth-child(" + x + ")").toggleClass("bigger"); //Not working...
}

.bigger {
  max-height: 400px;
  max-width: 400px;
  border: 150px solid blue;
}

.posts {
  height: 210px;
  max-width: 210px;
  background-color: #1a1a1a;
  display: inline-block;
  opacity: 0.5;
  margin-left: auto;
  margin-right: auto;
  margin: 20px 20px 20px 20px;
  padding: 10px 10px 10px 10px;
}

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

<div id="body">
  <div id="content">
    <div class="posts" onclick="toggle(1)">
      <img src="https://via.placeholder.com/50x50"></img>
      <p></p>
    </div>
    <div class="posts" onclick="toggle(2)">
      <img src="https://via.placeholder.com/50x50"></img>
      <p></p>
    </div>
  </div>
</div>

Answer 1

定位特定的图像更改

$("#content div img:nth-child("+x+")").toggleClass("bigger");

收件人

 $("#content  div:nth-child(" + x + ") img").toggleClass("bigger");

如果您考虑一下……这些<div>中的每一个都只有一个图像孩子