Question

JSFiddle供参考：https://jsfiddle.net/65gkj96b/1/

我正在尝试输入一个交替“有效”和“无效”箭头的功能。页面最初加载时，左箭头处于非活动状态（灰色背景），右箭头处于活动状态（悬停效果）。当用户单击右箭头时，左/右箭头表示要切换，以便左侧现在处于活动状态而右侧处于非活动状态。

到目前为止，这是我的代码：

function moreEmployees() {
  var left = $('#arrow-left');
  var right = $('#arrow-right');

  function activeArrow(active) {
    active.on('mouseenter mouseleave', function() {
      active.toggleClass('hover-arrow');
    });

    active.removeClass('null-arrow');
  }

  function inactiveArrow(inactive) {
    inactive.addClass('null-arrow');
  }

  inactiveArrow(left);
  activeArrow(right);

  $('.more-workers').hide();
  right.on('click', function() {
    $('.current-workers').fadeOut(1000);
    $('.more-workers').fadeIn(1000);

    inactiveArrow(right);
    activeArrow(left);
  });

  left.on('click', function() {
    $('.more-workers').fadeOut(1000);
    $('.current-workers').fadeIn(1000);

    inactiveArrow(left);
    activeArrow(right);
  });
}

moreEmployees();

因此，最初该功能有效，但有时'mouseenter mouseleave'效果消失，并且两个箭头都没有显示。然后，如果你继续点击箭头，它会回来。我希望功能一致，任何帮助将不胜感激:(

重复执行功能后，“Mouseenter mouseleave”效果不恒定

0 个答案: