Question

我试图找出一种方法来创建一个类，将一组效果组合在一起，这些效果执行相同的效果但只是不同的颜色。我是一个程序员，OOP是我还在学习的东西，需要一些指导。

我正在尝试使用'a'标签创建'标签'外观相似的形状，以便在鼠标悬停，鼠标移动或单击时更改字体和背景颜色。但是我想重用代码以解决许多其他颜色变化，所以我不想一遍又一遍地输入代码。

如何将函数分组为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代码，我认为必须有更好的方法来编写它。任何人都可以帮助一个类模板示例，以便我可以学习吗？

感谢。

Answer 1

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

Jquery - 将重复函数分组到类问题中

1 个答案: