Question

我是jquery的一名小伙子，因为他试图让以下人员工作而感到沮丧。我确信经验丰富的开发人员会立即采取行动，这很简单。

我在1个列表中有一个菜单，并在页面上的其他div中列出。当用户将鼠标悬停在菜单上时，将突出显示列表中的项目。我到目前为止。但由于列表很长，我需要点击事件，以便在用户向下滚动页面时突出显示项目。

没关系。但是当我们用户浏览菜单中的下一个项目时，我无法弄清楚如何从突出显示的项目中删除点击类。

$('#buttons li').hover(function () {
    $('.item-' + this.className).addClass('clients-hover');
},
function () {
    $('.item-' + this.className).removeClass('clients-hover');
});
$(function() {
  $('#buttons li').click(function() {
    $(this).addClass('clients-hover');
  });
});

例如，在下面的小提琴中，当用户徘徊或点击艺术家/乐队时，div中的项目会亮起，但当用户将鼠标悬停在喜剧演员上时，该类中的项目会突出显示，并且艺术家/乐队会返回正常。

http://jsfiddle.net/toddyhotpants/RCMaP/4/

这是在页面上（没有点击事件）： http://whitesky.com.au/clients/

提前感谢。

Answer 1

只需删除点击元素的其他兄弟姐妹的类clients-hover：

$(this).addClass('clients-hover').siblings().removeClass('clients-hover');

演示：http://jsfiddle.net/RCMaP/6/

根据您的评论，只需在将鼠标悬停在菜单nav上时修改您的代码：

$('#buttons li').hover(function () {
    $('.item-' + this.className).addClass('clients-hover')
    .parent().siblings().children().removeClass('clients-hover');
},

function () {
    $('.item-' + this.className).addClass('clients-hover');
});

演示：http://jsfiddle.net/RCMaP/12/

Answer 2

使用$.toggleClass()代替$ .addClass（）：）

Fiddle!

Answer 3

使用siblings()删除点击事件中的其他类别..更新了一些代码..您不需要两个document.ready函数....

试试这个

$('#buttons li').hover(function () {
   $("div[class^='item']").removeClass('clients-hover'); //<--here removesclass from all div
    $('.item-' + this.className).addClass('clients-hover');
},

$(function () {
  $('.item-' + this.className).removeClass('clients-hover'); // moved for other document.ready function 
  $('#buttons li').click(function () {
    $(this).siblings().removeClass('clients-hover'); //<--- here remove class from other li 
    $(this).addClass('clients-hover');
  });
});

fiddle here

Answer 4

这样的东西？

$('#buttons li').hover(function () {
    $('.item-' + this.className).addClass('clients-hover');
    },
    function () {
    $('.item-' + this.className).removeClass('clients-hover');
});

$(function() {
   $('#buttons li').click(function() {
      $("[class^=item]").not($('.item-' + this.className)).removeClass('clients-hover');
      $(this).addClass('clients-hover');
      $(this).siblings().removeClass('clients-hover');
      $('.item-' + this.className).addClass('clients-hover');
   });
});

在悬停时从div中删除Class

4 个答案: