Question

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

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.