Заменить окончание на несколько img src

Question

У меня есть 10 кнопок с различным изображением и текстом. У меня есть каждая кнопка для включения/выключения, и если нажата другая кнопка, я хочу, чтобы активная кнопка была выключена. Я борюсь с последним.

var x = 300; 

//port1 
    $('#port1').click(
    function(){ 
     var src = $('.image', this).attr('src'); 
     //var srcs = $(this).attr('src'); 
     if($(this).hasClass("highlight")) { 
      $('.butt').removeClass('highlight'); 
      $('.image', this).attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1')); 
      $('.p1').fadeOut(x); 
     } 
     else{ 
      $('.butt').removeClass('highlight'); 
     // $('.butt').attr('src').replace('_dark.png', '_light.png'); 
      $('.butt img').each(function() { 
       var src2 = $('.image').attr('src').replace(/_dark(\.[^.]+)?$/, '_light$1'); 
       $('.image').attr('src', src2); 
      }); 
      $('.talk').fadeOut(x); 
      $(this).addClass('highlight'); 
      $('.image', this).attr('src', src.replace(/_light(\.[^.]+)?$/, '_dark$1')); 
      $('.p0').fadeOut(x); 
      $('.p1').fadeIn(x); 
    } 
}); 

Проблема Я бегу в том, что при нажатии на кнопку, она меняет СРК на всех остальных кнопок, чтобы быть точно так же, как этот, и не просто изменить окончание на другие источники '_темно'. Я думал, что добавление этой функции «каждый» поможет, и это не так.

Edit: Я новичок в кодировании, но я попытался jsfiddle: http://jsfiddle.net/messedUP90/yxjoxe41/ Случайные компьютеры, которые появляются был эффект я иду за и код, который я написал, чтобы сделать это, прежде чем я вспомнил, что каждая икона будет отличаться , Посмотрите на первую кнопку под названием «un», где происходит ошибка, о которой я говорю.

Answer 1

http://jsfiddle.net/gtf1dk0m/1/

Вам необходимо повторно установить переменную src.

Этот код делает это:

$('.butt').each(function(index) { 
    if ($(this).attr('src')) { 
     $(this).attr('src', $(this).attr('src').replace(/_dark(\.[^.]+)?$/, '_light$1')); 
    } 
}); 

игнорировать тот факт, что изображение не меняет цвет в jsfiddle. он работает в Dreamweaver. :)

Answer 2

В этой функции есть некоторые странные коды и соглашения об именах ... такие как var src = $('.image', this).attr('src'); ... theres много необъяснимые вопросом, заданным здесь, и без jsfiddle трудно представить, что вы имеете в виду или видите, какие элементы HTML вы используете 're using ...

поэтому я постараюсь ответить на основе чисто вашего описания, а не вашего кода.

Если вы хотите удалить все экземпляры класса, такие как активный класс, вы могли бы просто выполнить функцию each, однако ваши последующие комментарии об этом, изменив все остальные источники изображений после щелчка, находятся в этой строке $('.image').attr('src', src2);. Вы эффективно нацелили все изображения под классом .butt, который, кажется, все ваши изображения. Возможно, что вы хотите на самом деле перебрать все элементы и удалить активное состояние, такие как ...

$(".butt img").each(function() { 
    //Remove Active Classes 
    if($(this).hasClass("activeImage")) { 
     $(this).removeClass("activeImage"); 
    } 
}); 

Тогда вы теперь свободны взять щелкнул кнопку и добавить его в активное состояние ...

$(".buttons").each(function() { 
    $(this).click(function() { 
     //Old Code 
     $(".butt img").each(function() { 
      //Remove Active Classes 
      if($(this).hasClass("activeImage")) { 
       $(this).removeClass("activeImage"); 
      } 
     }); 
     //New Code 
     $(this).addClass("activeImage"); 
    }); 
}); 

Затем в CSS вы можете убедиться, что у вас есть правило, как

.activeImage { 
    background-image: url("blah.png") !important; 
    /* You Get The Idea */ 
}