javascript - jQuery 侧边栏会切换，但不会向后滑动

Question

我有一个 jQuery slider ，单击它时，将在 if 之前触发 else。我不确定为什么要这样做。我需要它，所以当元素是

如果有人知道如何解决这个问题，那就太好了!

<div class="sidebar-mob" onclick="sidebarPull()">
  <i class="fas fa-angle-right"></i>
</div>

function sidebarPull(element) {
  if ($(element).data('clicked')) {
    $(".content").css("margin-left", "100%");
    $(".sidebar").css("margin-left", "-7%");
    $(".sidebar-mob i").css("transform", "180deg")
    console.log("if-clicked");
    $(element).data('clicked', false)
  } else {
    $(".content").css("margin-left", "0%");
    $(".sidebar").css("margin-left", "-100%");
    $(".sidebar-mob i").css("transform", "180deg")
    $(element).data('clicked', true)
    console.log("else-clicked");
  }
};

Answer 1

您没有将 element 参数传递给函数。将 this 添加到函数调用中:

<div class="sidebar-mob" onclick="sidebarPull(this)">
  <i class="fas fa-angle-right"></i>
</div>

话虽这么说，您可以通过使用不显眼的事件处理程序来整理它。内联事件处理程序已过时，应尽可能避免使用。试试这个:

<div class="sidebar-mob">
  <i class="fas fa-angle-right"></i>
</div>

$(function() {
  $('.sidebar-mob').click(function() {
    var $el = $(this);
    var clicked = $el.data('clicked');
    $(".content").css("margin-left", clicked ? "100%" : '0%');
    $(".sidebar").css("margin-left", clicked ? "-7%" : '-100%');
    $(".sidebar-mob i").css("transform", "180deg")
    $el.data('clicked', !clicked)
  });
});