Question

背景我有九个div与类.big1，.big2，.big3和.small1，.small2，.small3。 div不是兄弟姐妹或父母＆amp;孩子，或者我用纯CSS做这件事。

当.small1悬停时，我将.big1添加到.big2，当small2悬停在.big2时。我目前的方法（如下所示）有效，但不够优雅。虽然我对jQuery很陌生，但我相信可以将代码缩减为单个.addClass函数，使用变量来相应地更改类名。

问题： 我试图设置我的代码，以便将悬停的.big * x * div末尾的数字 x 附加到后面的.small * x * div的类名中，可能是通过.big和.small类中的数字创建变量。这就是我被困的地方。我已经看过使用.split（）来获取.small和.replace（）末尾的数字，以便将该数字放在.big的末尾，但我无法弄清楚如何设置它。建议表示赞赏！

jQuery的：

$('.small1').hover(
  function(){
    $('.big1').addClass("itemHover");
  },function(){
    $('.big1').removeClass("itemHover");
});

$('.small2').hover(
  function(){
    $('.big2').addClass("itemHover");
  },function(){
    $('.big2').removeClass("itemHover");
});

$('.small3').hover(
  function(){
    $('.big3').addClass("itemHover");
  },function(){
    $('.big3').removeClass("itemHover");
});

简化HTML：（同样，我的标记中的div不是兄弟姐妹或父母/子女）

<div class="big1"></div>
<div class="big2"></div>
<div class="big3"></div>
<div class="small1"></div>
<div class="small1"></div>
<div class="small2"></div>
<div class="small2"></div>
<div class="small3"></div>
<div class="small3"></div>

UPDATE /溶液 这只是为了澄清@ Sergio解决方案中的几行内容。有几个丢失的括号打破了FF中的代码。以下解决方案已在IE 10，Chrome和FF中成功测试：

$('div[class^="small"]').hover(function () {
    var this_class = $(this).prop('class');
    var filter = $.grep(this_class, function (a) {
        return a ^= 'small';
    });
    $('div.big' + filter).addClass("itemHover");
}, function () {
    $('div[class^="big"]').removeClass("itemHover");
});

Answer 1

您可以从class name开始删除small小班，以获取课程编号，并将该编号与big课程一起使用。

<强> Live Demo

$('[class^=small]').hover(     
  function(){  
      num = this.className.replace('small', '');
    $('.big' + num).addClass("itemHover");

  },function(){
      num = this.className.replace('small', '');
    $('.big' + num).removeClass("itemHover");
});

Answer 2

不确定你的html是怎样的，但这很有用：

选项1： （这适用于不同的类）

$('div[class^="small"').hover(function () {
      var filter = $.grep(this.className.split(' '), function(a) {
           return a.indexOf('small')===0;
      });
    filter = filter[0].split('small')[1];
    $('div.big' + filter).addClass("itemHover");
}, function () {
    $('div[class^="big"').removeClass("itemHover");
});

演示here （将鼠标悬停在S1上方

选项2：

var all_BIG = $('div[class^="big"');
var all_small = $('div[class^="small"');
all_small.hover(function () {
    var this_ind = $(this).index();
    all_BIG.eq(this_ind).addClass("itemHover");
}, function () {
    all_BIG.removeClass("itemHover");
});

演示here （将鼠标悬停在S1上方

使用部分类名作为.addClass的变量

2 个答案: