如何缩短此功能（addClass，attr）答案

【问题标题】：How can I shorten this function (addClass, attr)如何缩短此功能（addClass，attr）
【发布时间】：2016-02-22 18:09:39
【问题描述】：

如何缩短以下代码，而 t1 和 $('#t1') 不是相同的对象？

k1.hover(function(){
    $('#k1').addClass('hovered');
}, function(){
    $('#k1').removeClass('hovered');
});

k2.hover(function(){
    $('#k2').addClass('hovered');
}, function(){
    $('#k2').removeClass('hovered');
});

k3.hover(function(){
    $('#k3').addClass('hovered');
}, function(){
    $('#k3').removeClass('hovered');
});

k4.hover(function(){
    $('#k4').addClass('hovered');
}, function(){
    $('#k4').removeClass('hovered');
});

k5.hover(function(){
    $('#k5').addClass('hovered');
}, function(){
    $('#k5').removeClass('hovered');
});

我正在考虑这样的事情：

var magictrick = k[number].hover(function(){
  $('#k[number]').addClass('hovered');
}, function(){
  $('#k[number]').removeClass('hovered');
});

magicktrick[1,2,3,4,5,6,7,8,9];

这可能吗？

【问题讨论】：

什么是t1 和t2，它们在哪里定义？将有助于回答...
对每个单独的星星使用类而不是 id。
t1 和 t2 是 raphaeljs 元素！ @pzp 我已经考虑过了，但是课程要慢得多，不是吗？

标签： javascript jquery raphael

【解决方案1】：

// t1 hover
$('#t1').hover(function(){
    t1.attr({fill: '#8b2332'}).addClass('hovered');
}, function(){
    t1.attr({fill: '#e6e6e6'}).removeClass('hovered');
});


// t2 hover
$('#t2').hover(function(){
    t2.attr({fill: '#8b2332'}).addClass('hovered');
}, function(){
    t2.attr({fill: '#e6e6e6'}).removeClass('hovered');
});

【讨论】：

这不能解决问题，我想你误解了这个问题。悬停的类用于 ID 本身，而 attr 填充用于 raphaeljs 路径。

【解决方案2】：

我看不出有任何方法可以进一步简化它。让它更具可读性。

也许你可以改进你的循环。

var rsrHoversRed = [t1, t2, t3, t4];

for (var i = 0, len = rsrHoversRed.length; i <= len; i++) {
  var el = $(rsrHoversRed[i]);

  el.hover(function(){
      this.attr({
        cursor: 'pointer',
        fill: '#8b2332',
      }).addClass('hovered');
      }, function() {
      this.attr({
        fill: '#e6e6e6'
      }).removeClass('hovered');
  });
}

它会删除您的 tx.hover(func.. 代码。

【讨论】：

【解决方案3】：

只是另一种选择：

//////////////////////////
// bind both hovers
$('li').hover(function() {
if($(this).attr("id") == "t1") {
  t1.attr({
    fill: '#8b2332'
  });
}
if($(this).attr("id") == "t2") {
  t2.attr({
    fill: '#8b2332'
  });
}
if($(this).attr("id") == "t3") {
  t3.attr({
    fill: '#8b2332'
  });
}
if($(this).attr("id") == "t4") {
  t4.attr({
    fill: '#8b2332'
  });
}
}, function() {
  t1.attr({
    fill: '#e6e6e6'
  });
  t2.attr({
    fill: '#e6e6e6'
  });
  t3.attr({
    fill: '#e6e6e6'
  });
  t4.attr({
    fill: '#e6e6e6'
  });
});

t1.hover(function() {
  $('#t1').toggleClass('hovered');
});

// tn hover

t2.hover(function() {
  $('#t2').toggleClass('hovered');
});

t3.hover(function() {
  $('#t3').toggleClass('hovered');
});

t4.hover(function() {
  $('#t4').toggleClass('hovered');
});

【讨论】：