Question

您好我有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获取此内容的任何想法。任何帮助将不胜感激感谢

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

Answer 2

这可能有效

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

Answer 3

此函数应该针对该特定示例执行此操作：

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是标签的编号。

Answer 4

使用jQuery data函数

这样的东西

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

使用jquery一次更改一个图像

4 个答案: