简化悬停 Jquery 顺序

Question

我有一个图库，我想通过在悬停时添加一个类来提示多个项目在同一组中

我通过执行以下代码实现了它，我很确定它应该更简单，但我仍然在获取序列的句柄，所以我无法让它工作，因此任何帮助将不胜感激：

jQuery(".group1").hover( 
    function() { jQuery(".group1").addClass( "tint" );}, 
    function() { jQuery(".group1").removeClass( "tint" );});
jQuery(".group2").hover( 
    function() { jQuery(".group2").addClass( "tint" );}, 
    function() { jQuery(".group2").removeClass( "tint" );});
jQuery(".group3").hover( 
    function() { jQuery(".group3").addClass( "tint" );}, 
    function() { jQuery(".group3").removeClass( "tint" );});
jQuery(".group4").hover( 
    function() { jQuery(".group4").addClass( "tint" );}, 
    function() { jQuery(".group4").removeClass( "tint" );});
jQuery(".group5").hover( 
    function() { jQuery(".group5").addClass( "tint" );}, 
    function() { jQuery(".group5").removeClass( "tint" );});

Answer 1

将类组应用于所有元素，并将类group1应用于group5

jQuery(".group").hover( 
    function() { jQuery(".group1").addClass( "tint" );}, 
    function() { jQuery(".group1").removeClass( "tint" );
});

演示：小提琴

---

如果您不想这样做，请使用多个选择器

jQuery(".group1, .group2, .group3, .group4, .group5").hover( 
    function() { jQuery(".group1").addClass( "tint" );}, 
    function() { jQuery(".group1").removeClass( "tint" );
});

演示：小提琴

---

但我认为您真正想做的是从悬停元素中添加/删除色调类，以便

将类组添加到所有元素中，然后group5类group1

jQuery(".group").hover(function () {
    jQuery(this).addClass("tint");
}, function () {
    jQuery(this).removeClass("tint");
});

演示：小提琴

---

或

jQuery(".group1, .group2, .group3, .group4, .group5").hover(function () {
    jQuery(this).addClass("tint");
}, function () {
    jQuery(this).removeClass("tint");
});

演示：小提琴

---

更新

<div class="group group1">group1</div>
<div class="group group2">group2</div>
<div class="group group1">group1</div>
<div class="group group3">group3</div>
<div class="group group4">group4</div>
<div class="group group4">group4</div>
<div class="group group5">group5</div>
<div class="group group1">group1</div>
<div class="group group2">group2</div>
<div class="group group3">group3</div>
<div class="group group3">group3</div>
<div class="group group3">group3</div>
<div class="group group4">group4</div>
<div class="group group5">group5</div>

然后

jQuery('.group').hover(function () {
    jQuery('.' + this.className.match(/(groupd+)/)[1]).addClass("tint");
}, function () {
    jQuery('.' + this.className.match(/(groupd+)/)[1]).removeClass("tint");
});

演示：小提琴

Answer 2

假设您总是在 group1 上申请，我建议：

$.each([ ".group1", ".group2", ".group3", ".group4", ".group5" ], 
  function( index, value ) {
   $(value).hover( 
      function() { $(".group1").addClass( "tint" );}, 
      function() { $(".group1").removeClass( "tint" );}
   );
});

否则将".group1"替换为值

Answer 3

你应该使用遗传的方式来完成这项工作。

请看我做的这个例子

<div class="group"></div>
<div class="group"> </div>
<div class="group"></div>
<div class="group"></div>

.css：

.tint{
    background:black;
}
.group{
    width:100px;
        height:100px;
        margin:10px;
    border:1px solid black;
}

.js：

$('.group').hover(function(){
    $(this).addClass('tint')
},function(){
    $(this).removeClass('tint');
});

请参阅JSFIDDLE案例：http://jsfiddle.net/p6ULb/1/

---

更新因此，如果类名是 group1...组5 您可以通过以下方式工作。

.js

var arr=["group1","group2","group3","group4","group5"]
arr=arr.map(function(item){
    return "."+item;
});
console.log(arr);
$(arr.join(",")).hover(function(){
    $(this).addClass('tint')
},function(){
    $(this).removeClass('tint');
});

case jsfiddle：

http：//jsfiddle.net/p6ULb/2/