CODEWITHSUNDEEP
jquerybackground-image
Mr A
Mr A

Reputation: 6768

change one image at a time using jquery

Hi i have got 5 labels of product , what i want is to change the background-image of the label which is clicked, so for instance if Product 1 is clicked the background-image should change to background-image:url('/images/product1-selected'), similarly if product 2 is selected the background image for product 2 should be background-image:url('/images/product2-selected'), but in this case the product 1 image should go to the previous image as product 2 is selected. I want to show one image selected at a time , so for instance if product 2 is selected all the other products should go to default image which is defined in styles of each label, vice vera

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

Any ideas on how to get this using jquery. Any help will be appreciated Thanks

Upvotes: 0

Views: 264

Answers (4)

Ejaz
Ejaz

Reputation: 8872

something like this using jQuery data function 

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

Upvotes: 0

emerson.marini
emerson.marini

Reputation: 9348

Try this:

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

Upvotes: 1

Ben Green
Ben Green

Reputation: 438

this function should do it for that particular example:

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

So what that will do is, loop through labels 1-5 and set them all to the original image, then the selected one is set to have the selected background image.

(it would b preferable however to add an id to each label to make the selectors easier to manage)

then to each label you can add 

onclick="selectLabel(x)"

where x is the number of the label.

Upvotes: 1

Freeman Lambda
Freeman Lambda

Reputation: 3655

This might work

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

Upvotes: 1

Related Questions