1

我要做的是创建一个样本列表，在鼠标悬停时，显示悬停颜色的预览。我正在使用 CSS 精灵来提供样本和预览。我有它的工作，但我觉得有一个更有效的方式来提供相关的 jQuery。我正在寻求帮助以找到更优雅的解决方案。

以下是我的 HTML： 

<div class="chip-preview"></div>
<div class="style-swatches">
<ul>
    <li class="c1"></li>
    <li class="c2"></li>
    <li class="c3"></li>
    <li class="c4"></li>
    <li class="c5"></li>
    <li class="c6"></li>
    <li class="c7"></li>
    <li class="c8"></li>
    <li class="c9"></li>
    <li class="c10"></li>
    <li class="c11"></li>
    <li class="c12"></li>
</ul>
</div>

和我相关的 jQuery：

$('.c1').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-195px 0");
});
$('.c2').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-390px 0");
});
$('.c3').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-585px 0");
});
$('.c4').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-780px 0");
});
$('.c5').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-975px 0");
});
$('.c6').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-1170px 0");
});
$('.c7').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-1365px 0");
});
$('.c8').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-1560px 0");
});
$('.c9').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-1755px 0");
});
$('.c10').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-1950px 0");
});
$('.c11').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-2145px 0");
});
$('.c12').hover(function () {
    $(this).parents().find('.chip-preview').css("background-position","-2340px 0");
});

cN 类的每个增量都会将背景水平移动 -195px。关于如何使它变得更好的想法？

4

3 回答 3

1

试试这个：

var xPosition = -195;
$(".style-swatches li").each(function(){
    $(this).hover(function(){
        $(this).parents().find('.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
    });
});

小提琴

于 2013-08-05T13:23:36.237 回答
0

尝试

$('.c1, .c2, .c3').hover(function () {
    var $this = $(this), pos = $this.attr('class').match(/\bc(\d+)\b/)[1];
    $(this).parents().find('.chip-preview').css('background-position','-' + (pos * 195) + 'px 0');
});
于 2013-08-05T13:26:29.170 回答
0

也许是这样的？（很粗糙，慎用！）

$("[class^='c']").hover(function () {
    var classname = $(this).attr('class');
    var factor = substring(1);
    var position = Number(factor) * -195;
    position = position + "px 0";
    $(this).parents().find('.chip-preview').css("background-position", "-195px 0");
});
于 2013-08-05T13:33:12.527 回答