javascript - 选择覆盖时隐藏图像轮播上一个/下一个箭头

Question

我目前正在使用 Flickity slider ，并希望在单击“+”图标时隐藏箭头，并在禁用覆盖时显示箭头。

箭头的类是 .flickity-prev-next-button。我想在单击按钮时添加一个 display:none; css 属性。

实现此目标的最佳方法是什么？下面列出了打开和关闭叠加层的函数。我尝试将 $(".flickity-prev-next-button").css("display", "none"); 添加到 if 语句，但不幸的是没有成功。

       function openNav() {
      // if the element has the class tcon-transform (added/removed before calling this)
      if (event.target.classList.contains("tcon-transform")) {
        // the original icon was the plus: open the navigation
        document.getElementById("myNav").style.left = "50%";
$(".flickity-prev-next-button").css("display", "none");
      } else {
        // the original icon was the minus: close the navigation
        closeNav();
      }
        function closeNav() {
      document.getElementById("myNav").style.left = "100%";
    }
    }

这里有一段代码供您引用。

function openNav() {
  // if the element has the class tcon-transform (added/removed before calling this)
  if (event.target.classList.contains("tcon-transform")) {
    // the original icon was the plus: open the navigation
    document.getElementById("myNav").style.left = "50%";

  } else {

    // the original icon was the minus: close the navigation
    closeNav();
  }

  function closeNav() {
    document.getElementById("myNav").style.left = "100%";
  }
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}

#transformicon {
  float: right;
  position: relative;
  z-index: 2;
}

<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />
<!-- Import zero-transformicon build bundle -->
<link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">
<div id="transformicon">
  <zero-transformicon icon="plus-minus" onclick="openNav()">

  </zero-transformicon>
</div>

<div class="main-carousel js-flickity" data-flickity-options='{ "cellAlign": "left","contain": true,"wrapAround":true,"draggable":true,"arrowShape":"M62.5 0l3.6 2.1L38.7 50l27.4 47.9-3.6 2.1-28.6-50L62.5 0z"
}'>
  <div class="carousel-cell"><img src="https://i.ibb.co/zVBkvKZ/fever-t-shirt-front.jpg" alt="fever-t-shirt-front" border="0"></div>
  <div class="carousel-cell"><img src="https://i.ibb.co/zVBkvKZ/fever-t-shirt-front.jpg" alt="fever-t-shirt-front" border="0"></div>
</div>

<div id="myNav" class="overlay">

</div>

Answer 1

您尝试的代码:

$(".flickity-prev-next-button").css("display", "none");

为我工作，但你可能想使用

$('.flickity-prev-next-button').toggle();

以便导航按钮在覆盖层关闭时重新出现。

function openNav() {
  // if the element has the class tcon-transform (added/removed before calling this)
  $('.flickity-prev-next-button').toggle();
  if (event.target.classList.contains("tcon-transform")) {
    // the original icon was the plus: open the navigation
    document.getElementById("myNav").style.left = "50%";

  } else {

    // the original icon was the minus: close the navigation
    closeNav();
  }

  function closeNav() {
    document.getElementById("myNav").style.left = "100%";
  }
}

.main-carousel {
  margin-top: 50px;
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}

#transformicon {
  float: right;
  position: relative;
  z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />
<!-- Import zero-transformicon build bundle -->
<link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">
<div id="transformicon">
  <zero-transformicon icon="plus-minus" onclick="openNav()">

  </zero-transformicon>
</div>

<div class="main-carousel js-flickity" data-flickity-options='{ "cellAlign": "left","contain": true,"wrapAround":true,"draggable":true,"arrowShape":"M62.5 0l3.6 2.1L38.7 50l27.4 47.9-3.6 2.1-28.6-50L62.5 0z"
}'>
  <div class="carousel-cell"><img src="https://i.ibb.co/zVBkvKZ/fever-t-shirt-front.jpg" alt="fever-t-shirt-front" border="0"></div>
  <div class="carousel-cell"><img src="https://i.ibb.co/zVBkvKZ/fever-t-shirt-front.jpg" alt="fever-t-shirt-front" border="0"></div>
</div>

<div id="myNav" class="overlay">

</div>