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

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 に答える
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 に答える