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" );
});

演示：Fiddle

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

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

演示：Fiddle

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

将类组添加到类group1到group5然后

的所有元素

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

演示：Fiddle

或

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

演示：Fiddle

<强>更新

<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(/(group\d+)/)[1]).addClass("tint");
}, function () {
    jQuery('.' + this.className.match(/(group\d+)/)[1]).removeClass("tint");
});

演示：Fiddle

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 ... group5，您可以按照以下方式工作。

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');
});

案例jsfiddle：http://jsfiddle.net/p6ULb/2/

简化悬停Jquery顺序

3 个答案: