3

背景： 我有 .big1、.big2、.big3 和 .small1、.small2、.small3 类的 9 个 div。div 不是兄弟姐妹或父母和孩子，或者我会用纯 CSS 来做这件事。

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

问题： 我正在尝试设置我的代码，以便将悬停的 .big*x* div 末尾的数字x附加到随后的 .small*x* div 的类名中，可能是通过创建一个变量 out .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>

更新/解决方案： 这只是为了澄清@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");
});
4

2 回答 2

1

您可以删除class namesmall for classsmall以获取带有 class 的数字并将该数字与big class 一起使用。

现场演示

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

  },function(){
      num = this.className.replace('small', '');
    $('.big' + num).removeClass("itemHover");
});
于 2013-09-01T06:53:26.477 回答
1

不确定您的 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");
});

演示在这里（鼠标悬停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");
});

演示在这里（鼠标悬停S1）

于 2013-09-01T07:09:52.310 回答