javascript - 按下折叠或展开图片时如何连接我的滑动切换按钮

Question

我正在尝试连接我的切换按钮以在按下按钮时折叠和展开图片，但我发现很难实现这一点。我将不胜感激任何帮助。

<label class="switch">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="hide" data-off="show"></span> 
<span class="switch-handle"></span> 
</label>

<img src="sit1eq.jpg" width="600px">  <!-- (image I want to hide and show) -->

您可以在 JSFiddle 上找到按钮的 CSS。

JSFiddle

Answer 1

尝试将此 JS 添加到您的 fiddle 中:

// Get elements from the DOM
var checkbox = document.getElementsByClassName("switch-input")[0];
var img = document.getElementsByTagName("img")[0];

// Hide image by default
img.style.display = "none";

// Hide/show image on click depending on checkbox value
checkbox.addEventListener("click", e => 
  img.style.display = e.target.checked ? "block" : "none"
);

但是，您几乎肯定想将 id 添加到 DOM 节点，因为我使用的 getter 非常脆弱。