Question

为登录/注销按钮进行切换，但是此代码似乎从dom中删除了该元素，或者相反，当我再次将其激活时，它并没有将其放回去。我知道这一点的原因是，我必须在页面上单击两次我的元素才能使其执行预期的操作。第一次单击它时，它可以工作，但是在下一个“回合”切换中，其长度为零，并且在调试器中获得了“ prevObject”属性，因此我再次单击它，现在它位于dom和长度中是1，我们继续前进。我在做什么错了，还是不做什么？

$('#sz-login-out-group [sz-data-toggle-button]').on('click', (e) => {
  toggleButtonClick($(e.currentTarget));

  const isHidden = 'is-hidden';
  const isActive = 'is-active';
  const logIn = $('#sz-login');
  const logOut = $('#sz-logout');
  const myAccount = $('#sz-my-account');
  const selected = $(e.currentTarget).filter('.is-active');

  if (selected.length) {
    if (selected.prop('id') === 'sz-login') {
      logIn.addClass(isHidden);
      logIn.removeClass(isActive);
      logOut.removeClass(isHidden);
      myAccount.removeClass(isHidden);
      return;
    } else if (selected.prop('id') === 'sz-logout') {
      logIn.removeClass(isHidden);
      logIn.addClass(isActive);
      logOut.addClass(isHidden);
      myAccount.addClass(isHidden);
      return;
    }
  }
});

const toggleButtonClick = (target) => {
  if (target.hasClass('is-active')) {
    target.removeClass('is-active');
    return;
  }
  target.siblings().removeClass('is-active');
  target.addClass('is-active');
};

.is-visible {
  display: block !important; }

.is-hidden {
  display: none !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group" id="sz-login-out-group">
  <ul class="menu" data-toggle="menuToggle">
    <li><button class="button primary is-hidden" id="sz-logout" sz-data-toggle-button>Log Out</button></li>
    <li><button class="button clear sz-drop" id="sz-login" sz-data-toggle-button>Log In</button></li>
    <li><button class="button clear sz-drop is-hidden" id="sz-my-account" sz-data-toggle-button href="">My Account</button></li>
    <li><button class="button clear" id="sz-search-bar-toggle" data-toggle="sz-search-bar"><i class="fi-magnifying-glass"></i></button></li>
  </ul>
</div>

Answer 1

您必须单击两次，因为第一次删除is-active类，然后通过selected.length检查该类是否存在，然后才根据该类进行工作...

const toggleButtonClick = (target) => {
  // first click, remove 'is-active' class, code won't work
  if (target.hasClass('is-active')) {
target.removeClass('is-active');
return;
  }
  // second click, add 'is-active' class, code will work
  target.siblings().removeClass('is-active');
  target.addClass('is-active');
};

一种可能的解决方法是仅在完成此类工作后才删除该类...

$('#sz-login-out-group [sz-data-toggle-button]').on('click', (e) => {
  toggleButtonClick($(e.currentTarget));

  const isHidden = 'is-hidden';
  const isActive = 'is-active';
  const logIn = $('#sz-login');
  const logOut = $('#sz-logout');
  const myAccount = $('#sz-my-account');
  const selected = $(e.currentTarget).filter('.is-active');

  if (selected.length) {
if (selected.prop('id') === 'sz-login') {
  logIn.addClass(isHidden);
  logIn.removeClass(isActive);
  logOut.removeClass(isHidden);
  myAccount.removeClass(isHidden);
} else if (selected.prop('id') === 'sz-logout') {
  logIn.removeClass(isHidden);
  logIn.addClass(isActive);
  logOut.addClass(isHidden);
  myAccount.addClass(isHidden);
}
  }
  //remove class after the work is done
  if (e.currentTarget.hasClass('is-active')) {
e.currentTarget.removeClass('is-active');
return;
  }
});

const toggleButtonClick = (target) => {
debugger;
  target.siblings().removeClass('is-active');
  target.addClass('is-active');
};

Answer 2

代码比需要的复杂得多。如果我们详细地遍历代码，我们最终会弄清楚为什么您看到自己看到的内容，但从根本上讲，这是因为您不必要在多个元素上使用多个标志。

相反：

在#sz-login-out-group上使用单个标志类：logged-in
在登录时添加，在注销时删除
仅在登录类时提供您希望显示的元素，例如show-when-logged-in
让您只希望在登出后可见的元素-登出为此的类，例如show-when-logged-out
使用CSS规则显示/隐藏基于.show-when-logged-in和.show-when-logged-out的元素是否在具有.logged-in的容器中

示例：

$("#sz-login, #sz-logout").on("click", function() {
  $('#sz-login-out-group').toggleClass("logged-in", this.id === "sz-login");
});

.show-when-logged-in {
  display: none;
}
.logged-in .show-when-logged-out {
  display: none;
}
.logged-in .show-when-logged-in {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group" id="sz-login-out-group">
  <ul class="menu" data-toggle="menuToggle">
    <li><button class="button primary show-when-logged-in" id="sz-logout">Log Out</button></li>
    <li><button class="button clear sz-drop show-when-logged-out" id="sz-login">Log In</button></li>
    <li><button class="button clear sz-drop show-when-logged-in" id="sz-my-account" href="">My Account</button></li>
    <li><button class="button clear" id="sz-search-bar-toggle" data-toggle="sz-search-bar"><i class="fi-magnifying-glass"></i></button></li>
  </ul>
</div>

请注意，我删除了无效的sz-data-toggle-button属性。（如果要在元素上放置自定义属性，则data-部分必须首先，例如data-toggle-button。）

为什么“隐藏”会从dom中删除元素？

2 个答案: