Нужен совет по click(function)
 

В HTML выводятся изображения:

<div class="content">
<img src="img/1.jpg" >
<img src="img/2.jpg" >
<img src="img/3.jpg" >
<img src="img/4.jpg" >
<img src="img/5.jpg" >
<img src="img/6.jpg" >
<img src="img/7.jpg" >
<img src="img/8.jpg" >
<img src="img/9.jpg" >
</div>

В скрипте прописываю:

$(document).ready(function(){
$("a#create").click(function(){$("div#content").lo ad("create.html");});

$(".content img").hover(
function () {
$(this).addClass('imageover');
},
function()
{
$(this).removeClass('imageover');
}
);

$(".content img").click(function () {
$(this).toggleClass('imagehover').fadeOut(100).fad eIn(50).fadeOut(50).fadeIn(500);
}


);

});

Вопрос: toggleClass выбирает и подсвечивает картинку, по которой прошел щелчек мыши. А как сделать так, чтобы щелчек выбирал и подсвечивал только текущую картинку, а с остальных выделение сбрасывал? Нужно, чтобы картинки работали а-ля checkbox. Спасибо.

Ну выполните для остальных картинок тоже toggleClass

$(".content img").click(function () {
  $(".content img").toggleClass('imagehover');
  $(this).toggleClass('imagehover').fadeOut(100).fad eIn(50).fadeOut(50).fadeIn(500);
});

Не выходит. Получается, что нажатие на картинку либо включает тоггл, либо выключает у ВСЕХ картинок. Может быть я не корректно описал задумку.

Необходимо сделать так, чтобы щелкая на картинку она выбиралась (подсвечивалась), но только она ОДНА. Тоггл решает это дело, но при щелчке на вторую картинку, она выбирается, и выбранных картинок становится две, а это мне не подходит. Представьте, что эти картинки - список радиобаттон (ах, вот где я ошибся, обозвал их чекбоксами)

Что мешает всем сделать removeClass?

а ну да там вместо toggleClass должно removeClass стоять, не подумал… картинок то много :)

Все ребят, спасибо. Разобрался!! )

Подскажите как сделать, чтобы боковая панель при загрузке страницы не выезжала сама по себе, а чтобы выезжала при нажатии мышей, мозг скоро взорвётся!

$(function(){
$('.slider').click(function (){
$('#nav').slideToggle(1000);
var img = $(this).find('img');
if ($(img).attr('id') == 'bot'){
$(img).attr('src', 'images/arrow_top.png');
$(img).attr('id', 'top');
} else{
$(img).attr('src', 'images/arrow_bottom.png');
$(img).attr('id', 'bot');
}
});
$('.sub').click(function (){
var cur = $(this).prev();
$('#nav li ul').each(function(){
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
});
});