[jigabyte]

Hi Everyone,

I have some jquery code which on click changes the background image of a div. It changes the image as you click so it looks like a pointer image is doing the compass directions. My question is I have to repeat the routine below for another 5 divs. Is there a way to create a generic function passing in parameters so I only need to have it once? I need to use divs because I have also using drag and drop. Here is my code:-

$('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divLeft1').click(function () {
                var imageurl = $("input[id*='inpImageUrl1']").val();
                if (imageurl == 'url(Pointers/Blob-1%20W.gif)') {
                    $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPointer1').css('background-image', 'url(Pointers/Blob-1%20SSW.gif)');
                    $("input[id*='inpImageUrl1']").val('url(Pointers/Blob-1%20SSW.gif)');
                } else if (imageurl == 'url(Pointers/Blob-1%20SSW.gif)') {
                    $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPointer1').css('background-image', 'url(Pointers/Blob-1%20S.gif)');
                    $("input[id*='inpImageUrl1']").val('url(Pointers/Blob-1%20S.gif)');
                } else if (imageurl == 'url(Pointers/Blob-1%20S.gif)') {
                    $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPointer1').css('background-image', 'url(Pointers/Blob-1%20SSE.gif)');
                    $("input[id*='inpImageUrl1']").val('url(Pointers/Blob-1%20SSE.gif)');
                } else if (imageurl == 'url(Pointers/Blob-1%20SSE.gif)') {
                    $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPointer1').css('background-image', 'url(Pointers/Blob-1%20E.gif)');
                    $("input[id*='inpImageUrl1']").val('url(Pointers/Blob-1%20E.gif)');
                } else if (imageurl == 'url(Pointers/Blob-1%20E.gif)') {
                    $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPointer1').css('background-image', 'url(Pointers/Blob-1%20NNE.gif)');
                    $("input[id*='inpImageUrl1']").val('url(Pointers/Blob-1%20NNE.gif)');
                } else if (imageurl == 'url(Pointers/Blob-1%20NNE.gif)') {
                    $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPointer1').css('background-image', 'url(Pointers/Blob-1%20N.gif)');
                    $("input[id*='inpImageUrl1']").val('url(Pointers/Blob-1%20N.gif)');
                } else if (imageurl == 'url(Pointers/Blob-1%20N.gif)') {
                    $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPointer1').css('background-image', 'url(Pointers/Blob-1%20NNW.gif)');
                    $("input[id*='inpImageUrl1']").val('url(Pointers/Blob-1%20NNW.gif)');
                } else if (imageurl == 'url(Pointers/Blob-1%20NNW.gif)') {
                    $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPointer1').css('background-image', 'url(Pointers/Blob-1%20W.gif)');
                    $("input[id*='inpImageUrl1']").val('url(Pointers/Blob-1%20W.gif)');
                };
            });

Many thanks for any help, as I am still learning jQuery / java.

[Dormilich]

jigabyte, on 11 June 2013 - 04:34 PM, said:

Many thanks for any help, as I am still learning jQuery / java.

note: jQuery =/= Java, Java =/= Javascript.

I’d just use something like Array’s indexOf() (only with an object).

var imgs = {
  img_1 : "img_1_repl",
  img_2 : "img_2_repl",
  // etc.
};
$(...).on("click", function() {
  // ...
  if (imgurl in imgs) {
    $(...).css("background-image", "url(" + imgs[imgurl] + ");");
  }
});

[jigabyte]

Hi Dormilich,

Thanks for the example but I don't think that will work. Imaging have 4 images; one pointing north, east, south, west. It defaults to West. When the user clicks on a left arrow on screen I want it to move to South then East etc. And when they click on a right arrow I want it to change to North then East etc. I think looking at your example it is just checking if its in the array and then displays it.

Regards,

Jiggy

[Dormilich]

Quote

Thanks for the example but I don't think that will work.

the intention of the example was to demonstrate how to substitute multiple if()s with a single look-up. no more, no less.

[jigabyte]

I see! IT would not work for my senario because I need to check which one it is and depending on that move to the next. Almost like cycling through. The problem is I have to repeat the code above 4 more times for the other images and I was wondering if there was a more streamline way of doing it.

[Dormilich]

something like

$("#id1, #id2, #id3").on("click", handler_function);

?

[jigabyte]

Thanks Dormilich. I am very new to this learning it as I go. in the function itselft is it possible to identify which of the #ids has triggered the click event?

I am guessing I could use $(this)?

Hope you don't mind my asking but where did you learn jQuery?

[Dormilich]

jigabyte, on 12 June 2013 - 11:36 AM, said:

I am guessing I could use $(this)?

either that or, if you only need the id this.id.