Question

我要做的是创建一个样本列表，在鼠标悬停时显示正在悬停的颜色的预览。我正在使用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。如何让这更好的想法？

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

Fiddle

Answer 2

尝试

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

Answer 3

也许是这样的？（非常粗糙，小心使用！）

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

jQuery：迭代元素并移动CSS Sprite的背景位置

3 个答案: