通过使用 Jquery 添加和删除 Class 来切换开关

Question

我正在尝试制作一个切换开关，但我无法使用 toggleClass，因为在 #bar1 中我使用的是 SVG。对于 SVG，我读到我必须使用属性而不是 addClass()。我的想法是点击一个 div 来添加一个新的 class 并删除当前的 class。第一次点击代码有效，但我无法通过第二次点击恢复到原来的 class。关于我可能做错了什么的任何建议？

$(".hamburger-container").click(function() {
  $("#bar1").attr('class', 'bar1');
  $(this).addClass('toggle');
  $(this).removeClass('hamburger-container');
});

$(".toggle").click(function() {
  $("#bar1").removeAttr('class', 'bar1');
  $(this).addClass('hamburger-container');
  $(this).removeClass('toggle');
});

HTML

     <div class ="pull-right hamburger-container">

               <svg enable-background="new 0 0 32 32" height="32px" id="hamburger" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Menu"><path class ="bar" id="bar1" d="M1,7h30c0.552,0,1-0.448,1-1c0-0.552-0.448-1-1-1H1C0.448,5,0,5.448,0,6C0,6.552,0.448,7,1,7z" fill="#121313"/><path class="bar" id="bar2" d="M31,15H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,15.448,31.552,15,31,15z" fill="#121313"/><path class="bar" id="bar3" d="M31,25H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,25.448,31.552,25,31,25z" fill="#121313"/></g><g/><g/><g/><g/><g/><g/></svg>
            </div>

CSS

      .toggle {
     width: 50px;
     height: 30px;
     display: inline-block;
    position: relative;
    z-index: 1200;
    cursor:pointer;
    margin-right: 20px;
     margin-top: 10px;
     }

   .hamburger-container {
    width: 50px;
    height: 30px;
    display: inline-block;
     position: relative;
    z-index: 1020;
     cursor:pointer;
      margin-right: 20px;
     margin-top: 10px;
     }

Answer 1

将您的事件处理程序锚定到某个包装元素。

请注意，您删除了锚定的 class，因此一旦发生这种情况，点击事件处理程序的锚点将被删除。

示例：使用锚定到 pull-right class

的单个处理程序

$(".pull-right").on("click", function() {
  var me = $(this);
  if (me.hasClass('hamburger-container')) {
    $("#bar1").attr('class', 'bar1');
    me.addClass('toggle');
    me.removeClass('hamburger-container');
  } else {
    $("#bar1").removeAttr('class', 'bar1');
    me.addClass('hamburger-container');
    me.removeClass('toggle');
  }
});

请注意，使用 ".hamburger-container" 和 ".toggle" 引用的元素（如果可能的话，不是正文或文档）最接近的静态 "wrapper"；像 div

更简单CSS:

.hamburger-container,
.toggle {
  width: 50px;
  height: 30px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-right: 20px;
  margin-top: 10px;
}
.toggle {
  z-index: 1200;
}
.hamburger-container {
  z-index: 1020;
}

在这里测试：注意打开控制台查看日志 https://jsfiddle.net/MarkSchultheiss/tp5y8j1m/

Answer 2

假设您有一些标记开头如下：

<div class="hamburger-container">stuff</div>

我认为您可以将 JavaScript 简化为一个单击事件处理程序，只要您再添加一个 class 来标识您的元素（例如 "toggle-element"）：

<div class="toggle-element hamburger-container toggle">stuff</div>

现在通过 toggle-element 绑定到元素：

$(".toggle-element").click(function() {
    var $self = $(this);
    if ($self.attr('class') !== undefined) {
        $self.removeAttr('class');
    } else {
        $self.attr('class', 'bar1');
    }
    $self.toggleClass('toggle hamburger-container');
});

通过使用 Jquery 添加和删除 Class 来切换开关

toggle switch by adding and removing Class with Jquery

jquery

svg

toggle

addclass

removeclass