将 Jquery hover addclass 更改为单击 addclass答案

【问题标题】：change Jquery hover addclass to click addclass将 Jquery hover addclass 更改为单击 addclass
【发布时间】：2014-11-10 15:46:53
【问题描述】：

我在将 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/

【问题讨论】：

你有什么问题？

标签： jquery hover click addclass

【解决方案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/

【讨论】：