Question

i have a big problem which is driving me crazy:
i have a scrolling page with lots of divs and each has a different id, one below the other and no gap between them.
at the bottom of the viewport are 4 fixed buttons which all have a click function:

 $("#button1").click(function() { 
    $('#firstdiv').css("background-image", "url(bg1.jpg)");

 $("#button2").click(function() { 
    $('#firstdiv').css("background-image", "url(bg2.jpg)");

 $("#button3").click(function() { 
    $('#firstdiv').css("background-image", "url(bg3.jpg)");

 $("#button4").click(function() { 
    $('#firstdiv').css("background-image", "url(bg4.jpg)");

as you can see the buttons are for changing the background image of the current div.

when im scrolling down and the next div comes in it, fires an event. in this event i want to change the function of each button with different attributes for example

  $("#button1_2").click(function() { 
    $('#seconddiv').css("background-image", "url(bg5.jpg)");

and so on..

the function is the same, but it works for the second div and another bg-images…
could someone please give me an approach to do this dynamically that i dont have to make like 25 click functions for all the divs?

Answer 1

Change your buttons so that they look something like this (the attributes are the important things):

<button class="image-button" data-image="bg1.jpg">Text</button>

And then you could apply your event handler to all of them at once:

$(".image-button").click(function() { 
    var url = 'url(' + $(this).data('image') + ')';

    $('#firstdiv').css('background-image', url);
});