0

嗨，我有 5 个产品标签，我想要更改单击的标签的背景图像，例如，如果单击产品 1，则背景图像应更改为background-image:url('/images/product1-selected')，类似地，如果选择产品 2 为背景产品 2 的图像应该是background-image:url('/images/product2-selected')，但在这种情况下，产品 1 图像应该转到上一个图像，因为选择了产品 2。我想一次显示一个选择的图像，因此例如，如果选择了产品 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

试试这个：

$(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

这可能有效

$('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 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 回答