HTML5/jQuery: Trying to replace each image in a list with a different image

Question

I am using bxslider. I am trying to write some jQuery to replace each image in the slider with a different image once a button is clicked.

HTML:

<!--Slider list-->
<ul class="bxslider">
    <li><img  src="/img/green1.png" /></li>
    <li><img  src="/img/green2.png" /></li>
    <li><img  src="/img/green3.png" /></li>
    <li><img  src="/img/green4.png" /></li>
</ul>

<!--Button(s)-->
<ul class="colour">
    <li id="blue">Blue</li>
</ul>

jQuery:

(function() {
  // Variables                
  var colourLis= $(".colour").children(),
      listItems = $(".bxslider li img"),
      imgSrc = [ 1, 2, 3, 4, ];

  // Click button
 colourLis.click(function() {
      clickedID = $(this).id;
      listItems.each(function(index) {
          listItems.attr('src', '/img/' + clickedID + imgSrc[index] + '.png');

    });
  });
})();

I know this looks and sounds confusing and that my code is probably quite disorganised - I am rather new to this! Any general advice would be much appreciated.

Anyway, the above jQuery is meant so that, upon clicking of "blue," each of the four images in the slider would have their src altered to be directed to a new image, changing the contents of the slider.

E.g. /img/green1.png would become /img/blue1.png and green2.png would become blue2.png etc.

Thing is, this method doesn`t seem to be working consistently. I cant seem to nail down what is wrong but the console is often telling me that it is only loading image 4 for each instance. (I.e. blue4.png would be inserted into each li after the button is clicked).

If anyone could help me out that would be lovely!

I am open to better ways to do this. As I say I am new so not sure what the best way to do this kind of operation is. I wanted this function to be able to scale so I could have multiple different buttons, i.e. blue, red, orange etc.

Thanks in advance.

Sirrah

MattP · Accepted Answer · 2013-09-08 22:48:53Z

1

Since colourLis can contain multiple items you can't reliably use the id attribute in the way you are, you need to get the id specifically of the item you clicked. Also you have the click and each functions nested the wrong way around.

(function() {

//Variables                
var colourLis= $(".colour").children(),
    slideImage = $(".slideimage"),
    listItems = $(".bxslider li img"),
    imgSrc = [ 1, 2, 3, 4, ];

//Click button
colourLis.click(function() {
    // Get the ID of the item clicked
    clickedID = $(this).id;
    // For each image in list
    listItems.each(function(index) {
        slideImage.attr('src', '/img/' + clickedID + imgSrc[index] + '.png');    
    });
});
})();

answered Sep 8, 2013 at 22:48

MattP

2,8732 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sirrah Over a year ago

Hi Matt, yes you are absolutely right. I made the changes you suggested and also got rid of the useless slideImage variable and just used listItems instead. Still getting each image src being changed to #4 though. Thanks!

Alnitak Over a year ago

Please use .on('click', ...) instead of .click() - it helps remind you it's an event handler registration, not a "click trigger" call.

Shomz · Accepted Answer · 2013-09-08 23:20:21Z

0

Here's how I would handle that code. I'd drop all the unnecessary variables (unless you plan to change them later, in which case you should definitely stick with variables), and reorganise the nesting structure:

var imgSrc = [ 1, 2, 3, 4 ];

$('.colour li').on('click', function() {
    var col = $(this).attr('id');
    $('.bxslider li img').each(function(i) {
        $(this).attr('src', '/img/' + col + imgSrc[i] + '.png');
    });
});

You can even get rid of the imgSrc if you wish.

edited Sep 8, 2013 at 23:20

answered Sep 8, 2013 at 22:59

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

5 Comments

Sirrah Over a year ago

This is fantastic! I cleaned up the code to your specifications and suddenly the loop seemed to start working again. I will test a bit more and then figure out if this has solved it for good. Thanks!

Shomz Over a year ago

Great! You're welcome. Just be careful when defining variables, always think whether you really need them, learn about scopes and closures, because JavaScript can be rather sensitive when it comes to polluting the global variable scope since everything happens on the client side.

Sirrah Over a year ago

Thanks for your suggestions, I will take them on board. I have just played with it and the only problem now is that col seems to be returning undefined.

Shomz Over a year ago

$(this).attr('id'); instead of $(this).id;. Working example here: jsfiddle.net/ezUwa

Sirrah Over a year ago

Works perfectly! Thanks very much I'll answer this correct now.

Collectives™ on Stack Overflow

HTML5/jQuery: Trying to replace each image in a list with a different image

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related