如何从子复选框访问不同父 div 中的子 class？

Question

如何在点击复选框时旋转所有 3 张图片？

我正在尝试 ~，但它只影响复选框所在的图像。

HTML:

<div class="img-wrapper">
  <img class="img" src="https://via.placeholder.com/300" />
</div>

<div class="img-wrapper">
  <input class="checkbox" type="checkbox" id="rotate">
  <label class="label-checkbox" for="rotate">Rotate</label>

  <img class="img" src="https://via.placeholder.com/300" />
</div>

<div class="img-wrapper">
  <img class="img" src="https://via.placeholder.com/300" />
</div>

SCSS:

.checkbox:checked {
        ~ .img {
          transform: rotate(180deg);
        }
    }

Answer 1

你可以用 javascript 来做，像这样：

if ($("#rotate").is(':checked')) {
    $(".img-wrapper img").css("transform", "rotate(180deg)");
}

或

if ($("#rotate").is(':checked')) {
    $(this).parent().find("img").css("transform", "rotate(180deg)");
}

其他选项:has
https://caniuse.com/?search=%3Ahas

Answer 2

如果我们有 :has() 伪 select 或者今天，它可能是

.something:has(input:checked) img {
  transform: rotate(180deg);
}

至于我们还没有，您应该为它选中复选框

<input class="checkbox" type="checkbox" id="rotate">

<div class="img-wrapper">
  <img class="img" src="https://via.placeholder.com/300" />
</div>

<div class="img-wrapper">
  <label class="label-checkbox" for="rotate">Rotate</label>

  <img class="img" src="https://via.placeholder.com/300" />
</div>

<div class="img-wrapper">
  <img class="img" src="https://via.placeholder.com/300" />
</div>

然后您可以 select <img> 使用

input:checked ~ .img-wrapper > img {
  transform: rotate(180deg);
}

并且您可以通过隐藏原始 <input> 并在 <label>

上设置样式来绘制自定义复选框

如何从子复选框访问不同父 div 中的子 class？

How to access from child checkbox to child class in different parent divs?

html

css

checkbox

sass