仅从可见的 <img> 标签中添加/删除 class

Question

编辑：建议的重复线程和我的线程之间的区别是我想知道如何仅针对可见的 img 并为其打开和关闭 class。

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

我在那个网站上使用 fullpage.js。但是我想做一些超出该插件范围的事情，所以我需要一些帮助，因为我刚刚学习 HTML/CSS 并且对 Javascript.

几乎一无所知

这就是我想要做的： 我希望活动幻灯片上的背景图像从 "background-size: cover" 变为 "background-size: contain" 当用户按下 "space" 键时。如果他们再次按下 space 键，我希望图像返回到 "background-size: cover"。当我说 "active" 幻灯片时，我的意思是 fullpage.js 将 "active" class 添加到当前正在查看的 "slide" class。我希望此更改仅影响正在查看的幻灯片的背景图像，而不影响任何其他幻灯片。

编码方式：

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

并且 CSS 这样：

.lifestyle1 {
    background-image: url("/img/lifestyle/1Lifestyle.jpg");
    background-repeat: no-repeat;
    background-position: center 30%;
    width: 100%;
    height: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    z-index: -1;
}

.background_cover {
    background-size: cover;
}

所以你可以看到，如果我能以某种方式从活动图像中删除 "background_cover" class，背景图像将恢复为 "background-size: contain".

所以，这就是我的问题。我希望它清晰简洁。：）提前致谢。如果您需要更多信息，请告诉我。

Answer 1

您可以使用以下功能：

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

绑定到 keyup 确保该函数不会在按键持续按下时被重复调用。

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

仅从可见的 <img> 标签中添加/删除 class

Adding / removing class from only visible <img> tags

html

javascript

css

jquery

fullpage.js