jquery - 在通过 jQuery 发生动画时将函数传递给 "button"？

Question

当动画正在发生时，我如何通过 jQuery 将函数传递给“按钮”？

JavaScript 允许我选择 .nav-items 类下的所有数据和 forEach 方法来遍历这些数据和 nav 标签，最终传递它到名为 .navbar-toggle-show

的类

navbar-toggle-show类主要在屏幕处于max-width:768px时使用了一个display:flex

在 jQuery 方面是我发现最多问题的地方，因为虽然我可以淡入/淡出图标，但允许我切换内容的功能并不完全有效。我想做的是将切换功能传递给"new"显示的按钮。

$("document").ready(()=>{
  $(".svg-nav-toggle").on('click', ()=>{
    $(".svg-nav-toggle").fadeOut("slow");
    $(".svg-nav-toggle-on").fadeIn("slow");
  });
  $(".svg-nav-toggle-on").on('click', ()=>{
    $(".svg-nav-toggle-on").fadeOut("slow");
    $(".svg-nav-toggle").fadeIn();
  });
});

body {
background-color: #afafaf
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="navbar">      
        <div class="nav-brand">
            <p>Blog Personal</p>
        </div> 

        <div class="svg-nav-toggle hide"> <!-- START OF SVG ICONS -->
                <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 10 20">
                    <defs>
                      <style>
                        .cls-1 {
                          opacity: 1;
                        }
                        .cls-2 {
                          fill: rgb(255, 255, 255);
                        }
                      </style>
                    </defs>
                    <title>Off</title>
                    <g class="cls-1">
                      <path class="cls-2" d="M7.4,1A1.6,1.6,0,0,1,9,2.6V17.4A1.6,1.6,0,0,1,7.4,19H2.6A1.6,1.6,0,0,1,1,17.4V2.6A1.6,1.6,0,0,1,2.6,1H7.4m0-1H2.6A2.6,2.6,0,0,0,0,2.6V17.4A2.6,2.6,0,0,0,2.6,20H7.4A2.6,2.6,0,0,0,10,17.4V2.6A2.6,2.6,0,0,0,7.4,0Z" transform="translate(0)"/>
                    </g>
                  </svg>
                </div>
                
                <div class="svg-nav-toggle-on hide">
                <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 16.1 16.1">
                    <title>On</title>
                    <circle cx="8.1" cy="8.1" r="7.6"
                  style="fill: white ;stroke: #fff;stroke-miterlimit: 10"/>
                  </svg>
                </div> <!-- END OF SVG ICONS -->

       <nav class="nav-items"> <!-- START OF NAVBAR -->
           <div class="nav-link">
            <a href="#">Acerca</a>
           </div>
           <div class="nav-link">
            <a href="#">Portafolio</a>
           </div>
           </nav>
        <nav class="nav-items nav-items-right">
           <div class="nav-link">
            <a href="#">Descargas</a>
           </div>
           <div class="nav-link">
            <a href="#">Contacto</a>
            </div>
        </nav> <!-- END OF NAVBAR -->
        
    </div>

JavaScript

function classToggle() {
  const navs = document.querySelectorAll('.nav-items')

  navs.forEach(nav => nav.classList.toggle('navbar-toggle-show'));
}

document.querySelector('.hide').addEventListener('click', classToggle);

Answer 1

“少写，多做” 仍然是 jquery 非常真实的口号。本着这种精神，我冒昧地重写了您的脚本，并将其浓缩为两行。由于我不确定 classList.toggle('navbar-toggle-show') 中你的开/关类分配的含义，我用一个简单的 jquery-toggle() 替换了那个位 功能。这绝不是完美的(例如:为什么在导航栏已经打开时最初显示“打开”按钮？)但也许它可以向您展示前进的方式。

我用 $(".svg-nav").click() 替换了你的 $(".svg-nav").on('click',...) 因为这限制了仅在 ".svg-nav"-divs 上捕获的点击事件。否则，点击目标可能是 div 本身、底层 svg 甚至内部元素(圆圈或路径)。现在，将点击目标设置为“受限”后，我们就可以使用 .sibling() 函数对“其他”按钮进行操作。这使得两个按钮的单一功能成为可能。

我还将您的 classToggle() 函数的内容放入点击事件函数中，因为这两个函数基本上是在同一点触发的。通过使用 jquery，我不必使用所有的 forEach() 东西，因为 jquery 默认情况下会作用于所有匹配的元素，所以 .toggle() 方法将对所有找到的 .nav-items 采取行动。 toggle() 函数中的参数检查点击是否发生在我用 HTML 中的 id="navon" 标识的“On”按钮上。如果是，则该元素将变为可见，否则将被隐藏。

$(()=>{
  $(".svg-nav").click(function(){
    $(this).fadeOut().siblings().fadeIn();
    $(".nav-items").toggle(this.id=="navon");
  });
});

body {
background-color: #afafaf
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="navbar">      
        <div class="nav-brand">
            <p>Blog Personal</p>
        </div> 

        <div class="svg-nav" id="navoff"> <!-- START OF SVG ICONS -->
                <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 10 20">
                    <defs>
                      <style>
                        .cls-1 {
                          opacity: 1;
                        }
                        .cls-2 {
                          fill: rgb(255, 255, 255);
                        }
                      </style>
                    </defs>
                    <title>Off</title>
                    <g class="cls-1">
                      <path class="cls-2" d="M7.4,1A1.6,1.6,0,0,1,9,2.6V17.4A1.6,1.6,0,0,1,7.4,19H2.6A1.6,1.6,0,0,1,1,17.4V2.6A1.6,1.6,0,0,1,2.6,1H7.4m0-1H2.6A2.6,2.6,0,0,0,0,2.6V17.4A2.6,2.6,0,0,0,2.6,20H7.4A2.6,2.6,0,0,0,10,17.4V2.6A2.6,2.6,0,0,0,7.4,0Z" transform="translate(0)"/>
                    </g>
                  </svg>
                </div>
                
                <div class="svg-nav" id="navon">
                <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 16.1 16.1">
                    <title>On</title>
                    <circle cx="8.1" cy="8.1" r="7.6"
                  style="fill: white ;stroke: #fff;stroke-miterlimit: 10"/>
                  </svg>
                </div> <!-- END OF SVG ICONS -->

       <nav class="nav-items"> <!-- START OF NAVBAR -->
           <div class="nav-link">
            <a href="#">Acerca</a>
           </div>
           <div class="nav-link">
            <a href="#">Portafolio</a>
           </div>
           </nav>
        <nav class="nav-items nav-items-right">
           <div class="nav-link">
            <a href="#">Descargas</a>
           </div>
           <div class="nav-link">
            <a href="#">Contacto</a>
            </div>
        </nav> <!-- END OF NAVBAR -->
        
    </div>