Все руководители проектов должны иметь задачи по кодированию
В тех командах, в которых я работал, руководитель проекта был программистом, который достаточно хорошо понимал технические вопросы кода, чтобы Для выполнения задач кодирования принятым решениям не хватало коммуникационного разъединения, которое часто происходит в командах, где руководитель проекта не участвует в коде.
Perhaps CSS sprites would work for you?
That would save you from loading a separate image every time you click the image (button?), and you could solve your problem by adding and removing a css-class, e.g.:
$('.wizard-img').click(
function() {
if ($(this).hasClass('on')) {
$(this).removeClass('on').addClass('off');
} else if ($(this).hasClass('off')) {
$(this).removeClass('off');
} else {
$(this).addClass('on');
}
}
);
http://docs.jquery.com/Events/toggle
$(".wizard-img").toggle(
function () {
$(this).find("img").attr({src:"x-on.png"});
},
function () {
$(this).find("img").attr({src:"x-off.png"});
},
function () {
$(this).find("img").attr({src:"x.png"});
}
);
CSS Sprites would indeed be the way to do this, but just for completeness, here's another option.
Normally I'm the last to reach for a regexp, but I think they'll help here
$('.wizard-img').click(function() {
var $img = $(this).find('img') ,
src = $img.attr('src') ,
onCheck = /\-on\.jpg$/ ,
offCheck = /\-off\.jpg$/ ,
normal = /\.jpg$/
;
if(src.match(onCheck)) {
$img.attr('src', src.replace(onCheck, '-off.jpg'));
} else if (src.match(offCheck)) {
$img.attr('src', src.replace(offCheck, '.jpg'));
} else {
$img.attr('src', src.replace(normal, '-on.jpg'));
}
});
$('.wizard-img').click(function() {
var img = $(this).find('img');
var src = img.attr('src');
//image is neither on nor off, so change src to on and return
if(src != 'x-on.png' && src != 'x-off.png') {
img.attr('src','x-on.png');
return false;
}
//image is on, so change src to off and return
if(src == 'x-on.png') {
img.attr('src','x-off.png');
return false;
}
//image is off, so change src to x and return
if(src == 'x-off.png') {
img.attr('src','x.png');
return false;
}
});
FWIW, я предлагаю вам сделать это, используя простой CSS и background-image
. Мне кажется, что это не совсем обычные картинки, а скорее «кнопки».