jQuery的 - 分组重复功能为类问题

我试图找出一种方法来创建一个类组合在一起一组效果，执行同样的效果，但只是不同的颜色。我是一个程序员，OOP是我仍在学习的东西，需要一些指导。jQuery的 - 分组重复功能为类问题

我试图创建一个使用的一个标签，改变当鼠标悬停，鼠标移开或点击时的字体和背景颜色“标签”外形相似的形状。但我想重复使用许多其他颜色变化的代码，所以我讨厌继续输入代码一遍又一遍。

我如何组就像一个jQuery插件功能？

**CSS**

a.cbSizeTag { 
display: inline-block; 
padding: 4px 4px 4px 4px; 
margin: 0 2px 6px 0; 
background: #F5F5F1; 
    text-decoration: none; 
} 

a.cbShipmentTag { 
display: inline-block; 
padding: 4px 4px 4px 4px; 
margin: 0 2px 6px 0; 
background: #F5F5F1; 
text-decoration: none; 
}

**Jquery**

$('.cbSizeTag').mouseover(function() { 
$(this).css('background-color','#076EA0') 
$(this).css('color','#FFF') 
}); 

$('.cbSizeTag').mouseout(function() { 
if ($(this).hasClass('selected')){ 
    $(this).css('background-color','#076EA0') 
    $(this).css('color','#FFF') 
} else { 
    $(this).css('background-color','#F5F5F1') 
    $(this).css('color','#4B94BF') 
} 
}); 

$('.cbSizeTag').click(function() { 
$(this).toggleClass('selected'); 
if ($(this).hasClass('selected')){ 
    $(this).css('background-color','#076EA0') 
    $(this).css('color','#FFF') 
} else { 
    $(this).css('background-color','#F5F5F1') 
    $(this).css('color','#4B94BF') 
    } 
}); 

$('.cbShipmentTag').mouseover(function() { 
$(this).css('background-color','#B80000') 
    $(this).css('color','#FFF') 
}); 

$('.cbShipmentTag').mouseout(function() { 
if ($(this).hasClass('selected')){ 
$(this).css('background-color','#B80000') 
$(this).css('color','#FFF') 
} else { 
    $(this).css('background-color','#F5F5F1') 
$(this).css('color','#4B94BF') 
} 
}); 

$('.cbShipmentTag').click(function() { 
$(this).toggleClass('selected'); 
if ($(this).hasClass('selected')){ 
$(this).css('background-color','#B80000') 
$(this).css('color','#FFF') 
} else { 
$(this).css('background-color','#F5F5F1') 
$(this).css('color','#4B94BF') 
} 
});

**HTML**

<a href="javascript:void(0)" class="cbSizeTag">S</a> 
<a href="javascript:void(0)" class="cbSizeTag">M</a> 
<a href="javascript:void(0)" class="cbSizeTag">L</a> 
<br> 
<a href="javascript:void(0)" class="cbShipmentTag">DHL</a> 
<a href="javascript:void(0)" class="cbShipmentTag">FEDEX</a> 
<a href="javascript:void(0)" class="cbShipmentTag">Free</a>

所以，如果我是创建具有不同颜色的另外10个功能，我会创造10套CSS的， 10x3套Jquery代码和I t必须有更好的方式来编写它。任何人都可以帮助一个类模板的例子，所以我可以学习？

谢谢。

来源

2011-06-08 maomaopop

你为什么不使用CSS只，像a.cbShipmentTag：悬停......？因为你应该... – noinstance 2011-06-08 11:51:10

@nosuchnick：当我想点击它时怎么样？并取消了它？ Css不处理事件。 – maomaopop 2011-06-08 12:03:36

on document ready绑定点击函数$（'cbSizeTag'）。click（function（）{$（this）.addClass（'selected）}）。你可以在点击函数中构建一些逻辑，比如检查是否选择了类，所以它应该被删除。 – noinstance 2011-06-08 12:57:57

您可以使用具有开始和结束颜色值的自定义属性（data-startColor，data-endColor），而不是将其绑定到特定类，然后将此代码的单个块绑定到所有元素匹配$("[data-startColor]")，并在您绑定的事件中访问$(this).attr("data-startColor")和$(this).attr("data-endColor")的自定义颜色。

来源

2011-06-08 11:52:53

这是一个很棒的主意！谢谢。 – maomaopop 2011-06-09 08:32:37

jQuery的 - 分组重复功能为类问题

回答

相关问题