How to jQuery toggle multiple images on different button click ?

Question

Hi

Basically I have 4 images and 4 button. All 4 images are black and white.

Button1 click -- > toggles image 1 from black and white to color image
Button2 click -- > same for image2
Button3 click -- > same for image3
Button4 click -- > same for image4

So far my code is partially working. Problem is that when I click button 1 and then click button 2....at that point both image1 and image2 will stay as color images.

What I would like to do is that on any button click check to see if any other images are toggled as color images , if so then toggle them back to black and white and only toggle selected images to color image.

Button2 click -- > First: check to see if any images toggled as color iamges , if so toggle them back
second:toggle image2 from black and white to color images

Code

<button id="btn1" >Toggle1</button>
<button id="btn2" >Toggle2</button>
<button id="btn3" >Toggle3</button>
<button id="btn4" >Toggle4</button>

<div class="div1" ><img src="graphics/image1_black.jpg" /></div> <div class="div1 divblack" style="display: none"><img src="graphics/image1.jpg" /></div>

<div class="div2" ><img src="graphics/image2_black.jpg" /></div> <div class="div2 divblack" style="display: none"><img src="graphics/image2.jpg" /></div>

<div class="div3" ><img src="graphics/iamge3_black.jpg" /></div> <div class="div3 divblack" style="display: none"><img src="graphics/image3.jpg" /></div>

<div class="div4" ><img src="graphics/iamge4_black.jpg" /></div> <div class="div4 divblack" style="display: none"><img src="graphics/iamge4.jpg" /></div>

<script>

$("#btn1").click(function() {
    $(".div1").toggle();
});
$("#btn2").click(function() {
    $(".div2").toggle();
});
$("#btn3").click(function() {     
    $(".div3").toggle();
});
$("#btn4").click(function() { 
    $(".div4").toggle();
});            

</script>

=========================================================================

UPDATED CODE:

This is what I am trying to do. As you can see my class overlap between images. So one image can have more than 1 class. This is causing buttons to toggle already toggeled images.

<button id="btn1" >Toggle1</button>
<button id="btn2" >Toggle2</button>
<button id="btn3" >Toggle3</button>
<button id="btn4" >Toggle4</button>

<img class="im1" src="image1_bw.jpg" />
<img class="im1 im2" src="image2_bw.jpg" />
<img class="im2 im3" src="image3_bw.jpg" />
<img class="im4" src="image4_bw.jpg" />

<script>

            // Use the same handler for all button elements
            //   where the ID starts with "btn"
    $("[id^=btn]").click(function() {

              // Grab the number from the end of the ID
        var number = this.id.match(/\d+$/)[0];

              // Find the image ID ending in the same number
              //   and modify its src, toggling the "_black" part of it
        var $img = $(".im" + number).attr('src', function(i, attr) {
            return /_bw/.test(attr) ? attr.replace(/_bw/, '') : attr.replace(/.jpg/, '_bw.jpg');
        });

              // Get the rest of elements with IDs starting with "img"
              //    and modify their src, removing "_black" 
        $("[id^=img]").not($img).attr('src', function(i, attr) {
            return attr.replace('_bw', '');
        });
    });          

</script>

Answer 1

Just toggle isn't gonna cut it. you need a specific switchToBW and a switchToColor function for that.

The easiest way is: On click you'd toggle all images to b/w, and then just the one you want to color.

A "better" way is: On click switch all those images that are not b/w to b/w and then the one you want to color.

Answer 2

Mind if I suggest a different approach?

Just set up one handler for all the buttons, and give the images IDs that end in the same respective number.

Then simply modify the src attribute of the image with the same number to toggle the _black portion, and remove the _black portion of the src from the others.

HTML

<button id="btn1" >Toggle1</button>
<button id="btn2" >Toggle2</button>
<button id="btn3" >Toggle3</button>
<button id="btn4" >Toggle4</button>

<img class="im1" src="image1_bw.jpg" />
<img class="im1 im2" src="image2_bw.jpg" />
<img class="im2 im3" src="image3_bw.jpg" />
<img class="im4" src="image4_bw.jpg" />

jQuery

$("[id^=btn]").click(function () {

    var number = this.id.match(/\d+$/)[0];
    var $img = $(".im" + number);
    var button = this;

    $img.each(function () {
        var $th = $(this);

        if ($th.is('[src*=_bw]')) {
            $th.data('button', button.id);
            $th.attr('src', function (i, attr) {
                return attr.replace(/_bw/, '');
            });
        } else if ($th.data('button') == button.id) {
            if ($th.not('[src*=_bw]').length) {
                $th.attr('src', function (i, attr) {
                    $th.data('button', null);
                    return attr.replace(/.jpg/, '_bw.jpg');
                });
            }
        }
    });
});

---

EDIT: Updated so that only the button that made an image color can bring it back to black/white.

EDIT: It seems that we have several possibilities to consider given the images associated with a particular button.

The code written will need to incorporate sufficient logic for the following possible scenarios:

The button clicked has...

1. ...2 images that are b/w, so set to color and store which button set them.
2. ...2 images that are color, that were set by the same button that was clicked, so set them to b/w and erase the record of the button that made them color.
3. ...2 images that are color, but both set by different buttons, so the button clicked will have no effect.
4. ...2 images that are color, but only one of them was set by the button clicked, so make that one image b/w and erase the record of the button that made it color.
5. ...2 images (1 color and 1 b/w), and the one that is color was set by the button clicked, so either change the color one to b/w and erase the record of the button that made it color, OR make the b/w one color, and store which button made it color. (Not sure which you want.)
6. ...2 images (1 color and 1 b/w), and the one that is color was set by a different button, so do not change the color one, but change the b/w one to color, and store which button made it color.
7. ...1 image that is b/w, so set to color and store which button set it.
8. ...1 image that is color, and was set by the same button that was clicked, so set it to b/w and erase the record of the button that made it color.
9. ...1 image that is color, and was set by a different button, so the button clicked will have no effect.