更改Jquery悬停addclass以单击addclass

Question

我将更改addClass从悬停到点击时出现问题：

这是代码：

      $('.showcase-panels-container > ul > li').hover
     (
    function() {
      $(this).parents('.showcase-panels-container').attr('data-hover', $(this).index());
      $(this).addClass('hovered');
      var $this = $(this);
      $(this).siblings().each(function() {
        if ($(this).index() < $this.index()) {
          $(this).addClass('right-was-hovered');
        } else if ($(this).index() > $this.index()) {
          $(this).addClass('left-was-hovered');
        }
      });
    },
    function() {
      $(this).parents('.showcase-panels-container').removeAttr('data-hover')
      .find('> ul > li').removeClass('hovered right-was-hovered left-was-hovered');
    }
  );

你可以查看： http://jsfiddle.net/6vvk4ct8/

我尝试按照以下示例更改代码： http://jsfiddle.net/XBfMV/

Answer 1

试试这个：

jQuery(document).ready(function($) {
 $('.showcase-panels-container > ul > li').click(function() {
  $(this).parents('.showcase-panels-container').removeAttr('data-hover').find('> ul > li').removeClass('hovered right-was-hovered left-was-hovered');
  $(this).parents('.showcase-panels-container').attr('data-hover', $(this).index());
  $(this).addClass('hovered');
  var $this = $(this);
  $(this).siblings().each(function() {
    if ($(this).index() < $this.index()) {
      $(this).addClass('right-was-hovered');
    } else if ($(this).index() > $this.index()) {
      $(this).addClass('left-was-hovered');
    }
  });     
}
);
});

工作小提琴：http://jsfiddle.net/robertrozas/6vvk4ct8/3/