В основном у меня есть 4 изображения и 4 кнопки. Все 4 изображения являются черными и белыми.

Щелчок Button1-> переключатели отображает 1 от черного цвета и белого цвета к цветному изображению
Щелчок Button2-> то же для image2
Щелчок Button3-> то же для image3
Щелчок Button4-> то же для image4

До сих пор мой код частично работает. Проблема состоит в том, что, когда я нажимаю кнопку 1 и затем нажимаю кнопку 2.... на ту точку и image1 и image2 останутся как цветные изображения.

То, что я хотел бы сделать, - то, что на любой проверке нажатия кнопки, чтобы видеть, переключаются ли какие-либо другие изображения как цветные изображения, раз так затем, переключите их назад к черному цвету и белому цвету и только переключите выбранные изображения к цветному изображению.

Щелчок Button2-> Сначала: проверьте, чтобы видеть, отображают ли какие-либо изображения, переключенные как цвет, раз так переключите их назад
second:toggle image2 от черного цвета и белого цвета к цветным изображениям

Код

<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>

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

ОБНОВЛЕННЫЙ КОД:

Это - то, что я пытаюсь сделать. Поскольку Вы видите, что мой класс накладывается между изображениями. Таким образом, одно изображение может иметь больше чем 1 класс. Это заставляет кнопки уже переключить toggeled изображения.

<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>