0

こんにちは、製品の 5 つのラベルがあります。クリックされたラベルの背景画像を変更したいので、たとえば、製品 1 をクリックすると背景画像が に変わりますbackground-image:url('/images/product1-selected')。同様に、製品 2 が背景として選択された場合も同様です。製品 2 の画像は である必要がありますbackground-image:url('/images/product2-selected')が、この場合、製品 2 が選択されているため、製品 1 の画像は前の画像に移動する必要があります。一度に 1 つの画像を選択して表示したいので、たとえば、製品 2 が選択されている場合、他のすべての製品は、各ラベルのスタイルで定義されているデフォルトの画像に移動する必要があります。

<label for="1" style="background-image:url('/images/product1');width:50px;height:49px;">Product 1</label>
<label for="2" style="background-image:url('/images/product2');width:50px;height:49px;">Product 2</label>
<label for="3" style="background-image:url('/images/product3');width:50px;height:49px;">Product 3</label>
<label for="4" style="background-image:url('/images/product4');width:50px;height:49px;">Product 4</label>
<label for="5" style="background-image:url('/images/product5');width:50px;height:49px;">Product 5</label>

jqueryを使用してこれを取得する方法に関するアイデア。どんな助けでも感謝しますありがとう

4

4 に答える 4

1

これはうまくいくかもしれません

$('label').click(function() {
    $('label').each(function() {
        indexLabel = $(this).attr('for');
        $(this).css('background-image','url("/images/product'+indexLabel+'")');
        if($(this).index()==indexLabel) {
            $(this).css('background-image','url("/images/product'+indexLabel+'-selected'+'")');
        }
    }
});
于 2013-04-05T12:20:43.223 に答える
1

これを試して：

$(function() {
    $("label").on("click", function() {
        // Removing previously selected ones
        $("label").each(function() {
            $(this).css("background-image", $(this).css("background-image").replace("-selected", ""));
        }):

        $(this).css("background-image", $(this).css("background-image") + "-selected"));
    });
});
于 2013-04-05T12:19:19.423 に答える
1

この関数は、その特定の例に対してそれを行う必要があります:

function selectLabel(label_id)
{
    for (var i = 1, i <= 5, i++) {
        $('[for="'+i+'"]').attr("stlye", "background-image:url('/images/product"+i+"');width:50px;height:49px;");
    }

    $('[for="'+label_id+'"]').attr("stlye", "background-image:url('/images/product"+i+"-selected');width:50px;height:49px;");
}

つまり、ラベル 1 ～ 5 をループしてすべて元の画像に設定すると、選択した背景画像が選択された画像に設定されます。

(ただし、セレクターを管理しやすくするために、各ラベルに ID を追加することをお勧めします)

次に、追加できる各ラベルに

onclick="selectLabel(x)"

ここで、x はラベルの番号です。

于 2013-04-05T12:21:01.757 に答える
0

jQuerydata関数 を使用したこのようなもの

   $(function
       $('label').click(function () {
           if($(this).data('oldimg')) return false;

           $('label').filter(function(){return $(this).data('oldimg')}).each(function () {
              $(this).css('background-image', $(this).data('oldimg')).removeData('oldimg');
           })
           $(this)
              .data('oldimg', $(this).css('background-image'))
              .css('background-image', $(this).css('background-image').replace(/(\.\w{3})/, '-selected$1'));
        })
    })
于 2013-04-05T12:32:42.093 に答える