Javascript 仅从可见对象添加/删除类<；img>；标签

编辑：建议的复制线程和我的线程之间的区别是，我想知道如何只针对可见的img，并为它打开和关闭一个类

我有一个有趣的情况，我希望得到一些帮助。在我继续之前，这里是网站：

我正在那个网站上使用。但是我想做一些超出插件范围的事情，所以我需要一些帮助，因为我只是在学习HTML/CSS，对Javascript几乎一无所知

这就是我想要做的：我希望当用户按下“空格”键时，活动幻灯片上的背景图像从“背景大小：封面”变为“背景大小：包含”。如果他们再次按空格键，我希望图像返回到“背景尺寸：封面”。当我说“活动”幻灯片时，我的意思是fullpage.js将一个“活动”类添加到当前正在查看的“幻灯片”类中。我希望此更改只影响正在查看的幻灯片的背景图像，而不影响任何其他幻灯片

事物的编码方式：

<div class="slide loading">
    <img class="lifestyle1 background_cover" /> 
</div>

因此，您可以看到，如果我能够以某种方式从活动图像中删除“background\u cover”类，那么背景图像将恢复为“background size:contain”

---

这就是我的问题。我希望它清晰明了提前谢谢。如果您需要更多信息，请告诉我。

您可以使用以下功能：

$(function () { 
  $(document).on("keyup", function (e) {
    if (e.keyCode == 32) {
        $(".slide.active > img").toggleClass('background_cover'); 
    }
  });
});

绑定到keyup可确保在按住键的情况下不会重复调用该函数

---

.slide.active获取当前选定的幻灯片。

使用

$（'img:visible'）.addClass（'someClass'）为什么不使用简单的CSS规则<代码>.activeimg

我遗漏了一点非常重要的信息。我希望在用户按下空格键时发生这种情况。真不敢相信我漏掉了。有点重要。：）这听起来真像是一个XY问题，可能是它的复制品！好的，现在我看到您在使用活动类的幻灯片中使用“>”仅选择img。谢谢你的帮助。PS-我最终使用了shift键。我忘了空格键会向下滚动。@dsiglin

仅当img是.slide中的直接子项时才选择它（就像您的情况一样）<代码>$（“.slide.active img”）也可以使用，但是

使它更具体。感谢您的解释。我有很多东西要学。对于任何阅读本文的人，我发现“背景封面”必须在CSS文件中的“生活方式1”类之后。它也必须在同一个CSS文件中。我有两个不同的CSS文件，在另一个CSS文件中有“背景封面”不起作用。@dsiglin它不必在同一个CSS文件中。可能是因为另一个CSS文件包含在具有“Lifestyle 1”类的CSS文件之前。css的工作方式是，最后一个参数覆盖具有相同特性的属性。So

背景尺寸：包含将覆盖
背景尺寸：封面如果生活方式1是后来定义的。这是我最初的想法，但“main.css”在“backgrounds.css”之后。我可能在别的什么地方把事情搞砸了。
$(function () { 
  $(document).on("keyup", function (e) {
    if (e.keyCode == 32) {
        $(".slide.active > img").toggleClass('background_cover'); 
    }
  });
});