Javascript 如何在按下“折叠”或“展开”图片时连接我的滑动切换按钮

我试图连接我的切换按钮，以折叠和扩大一张图片时，按下按钮，但我发现很难做到这一点。我将感谢任何帮助

<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) -->

您可以在JSFIDLE上找到按钮的CSS

---

因此，您要做的是向开关添加某种类型的事件侦听器（在本例中为

input

），这样当您选中或取消选中输入时，JavaScript可以执行您希望它执行的操作

我用一些JavaScript修改了JSFIDLE（我添加了jQuery库），其中包括：

如果您想使用这些代码，下面是JSFIDLE：

---

如果您想要一些比

show（）

或

hide（）

更奇特的效果，请随意更改！希望这对你有所帮助-请随时提问

尝试将此JS添加到您的小提琴中：

// 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"
);

---

但是，您几乎肯定希望向DOM节点添加ID，因为我使用的getter非常脆弱。

您是否使用任何库？你从哪里获得

属性上的数据和
属性下的数据？oooooh，你从我这里得到+1，因为你不需要像我那样依赖jQuery，我只是想知道我希望图片作为默认隐藏，然后当你切换按钮时它会出现？任何想法如何做到这一点>谢谢你的回复，我也非常感谢你在没有jquey的情况下这么做，这是一个博努西。我建议你包括
display:none启动
img
。然后将
img.style.display
部分改为类似于，
img.style.display=e.target.checked？“无”：“block”
（该行将css从
display:none
更改为
display:block
，反之亦然）将默认设置更改为隐藏。根据
上的
数据、按钮文本和开关指示灯的颜色，我不清楚OP想要哪种行为。我只是在想，当你按下按钮时，如何将图片默认为隐藏？您只需要交换hide（）和show（）标记吗？只需要说声谢谢，因为这就是我想要的是的，你会想要切换
hide（）
和
show（）
，但是你也会想要在代码的其余部分上方抛出一个
$（'img'）。hide（）
。它在这里工作：（需要注意的一件事：您可能想要更改切换中的文本）
// 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"
);