Question

我有一个旋转木马，里面的每个幻灯片都包含在“app__slide”类中，如下所示。每次为了显示幻灯片，我都会向幻灯片添加第二个类“显示”，其不透明度为1。

        <div class="app__slide">
            <div class="app__left-contenu">
                <div class="app__phone-background"></div>
                <div class="app__titre">
                    <p>votre lookbook personnel</p>
                </div>
                <div class="app__text">
                    <p>Stockez par la suite vos photos et videos sur votre lookbook personnel, et partagez aussi vos photos et videos sur les réseaux sociaux. Enregistrez vos favoris.</p>
                </div>
            </div>
            <div class="app__right-contenu">
                <div class="app__phone-background"></div>
                <div class="app__phone-images">
                    <img class="app__blured-image" src="./img/app/large/Iphone 7_01.png" alt="">
                    //- en savoir plus bouton
                    <div id="app__phone-bouton">
                        <div class="bouton-circle"></div>
                        <div class="bouton-inner"></div>
                    </div>
                </div>
            </div>
        </div>

我想在JS中创建一个函数，允许我在类“app__phone-images”中模糊图像然后在类“app__text”中显示文本

document.getElementById('app__phone-bouton').addEventListener('click', function() {
if(document.querySelector('.app__blured-image').style.filter = "blur(0px)")
document.querySelector('.app__blured-image').style.filter ="blur(10px)";
else
document.querySelector('.app__blured-image').style.filter = "blur(0px)";

}）;

我的问题是我的功能取决于“显示”类，我不知道如何选择我想要的幻灯片。谁能告诉我怎么做呢？

Before clicking the button

After clicking the button

P / S：我不允许使用jQuery，所以我会非常感谢纯JS中的答案

Answer 1

我不确定这是否是您需要的，但这可能有所帮助：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Blur Test 1</title>
    <style>
    body {
      background-color: black;
      padding-top: 100px;
      text-align: center;
    }

    .app__slide {
      margin: 0 auto;
      position: relative;
      text-align: center;
      width: 500px;
    }

    #app__phone-bouton {
      background-color: #00F;
      border-radius: 50%;
      cursor: pointer;
      height: 24px;
      margin: 40px auto 5px;
      position: relative;
      width: 24px;
    }

    #app__phone-bouton:before {
      border-radius: 50%;
      border: 1px solid rgba(0,0,255,.75);
      content: '';
      height: 40px;
      left: -9px;
      position: absolute;
      top: -9px;
      width: 40px;
    }

    #app__phone-bouton > div {
      display: none;
    }

    .app__titre {
      font-size: 18px;
      font-weight: bold;
    }

    .app__left-contenu {
      display: none;
    }

    .app__slide__show-text .app__left-contenu {
      background-color: rgba(64,64,64,.75);
      border-radius: 10px;
      color: #FFF;
      display: block;
      left: 50%;
      min-height: 300px;
      min-width: 400px;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }

    .app__slide__show-text .app__blured-image {
      filter: blur(10px);
    }
    </style>
  </head>
  <body>
    <div class="app__slide">
      <div class="app__left-contenu">
        <div class="app__phone-background"></div>
        <div class="app__titre">
          <p>votre lookbook personnel</p>
        </div>
        <div class="app__text">
          <p>Stockez par la suite vos photos et videos sur votre lookbook personnel, et partagez aussi vos photos et videos sur les réseaux sociaux. Enregistrez vos favoris.</p>
        </div>
      </div>
      <div class="app__right-contenu">
        <div class="app__phone-background"></div>
        <div class="app__phone-images">
          <img class="app__blured-image" src="iphone.png" alt="">
          <div id="app__phone-bouton"></div>
        </div>
      </div>
    </div>
    <script>
    document.getElementById('app__phone-bouton').addEventListener('click', function() {
      document.querySelector('.app__slide').classList.toggle('app__slide__show-text');
    });

    </script>
  </body>
</html>

这里的技巧是使用CSS来触发文本的显示和隐藏以及图像的模糊。

document.querySelector('.app__slide').classList.toggle('app__slide__show-text');

类名app__slide__show-text用于表示文字显示和图像模糊。

通常最好设置一个类名而不是样式。

如果这不是你想要的，请告诉我。

更新

尝试类似这样的代码：

document.querySelectorAll('.app__slide').forEach(
  func‌tion(slide) {
    var bouton = slide.querySelector('.app__phone-bouton');
    bouton.addEventListener('click', 
      function() { 
        slide.querySelector('.app__blured-image').classList.toggl‌e('app__blured-image‌-on');
        slide.querySelector('.app__text').classList.toggle('app__‌text-mobile-on');
        slide.querySelector('.app__phone-background').classList.t‌oggle('app__phone-ba‌ckground-on');
      }
    );
  }
);

这将允许每张幻灯片控制其子女。

使用纯JS向子类添加属性

1 个答案:

更新