在通过jQuery发生动画时将函数传递给“按钮”？

Question

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

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

navbar-toggle-show的类主要在屏幕在max-width:768px时使用display:flex

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

$("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"-div 上捕获的点击事件。否则，点击目标可能是 div 本身、底层 svg 甚至是内部元素（圆或路径）。让点击目标“受限”现在允许我们使用.sibling() 函数作用于“其他”按钮。这样就可以摆脱两个按钮的单一功能。

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

$(()=>{
  $(".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>