Такая задача.
На странице есть 5 параграфов ("p"). Параграф в данном случае будет выступать в качестве обертки. В каждом параграфе по два элемента (input type="text" и img).
Идея следующая:
- Все параграфы, в которых значения текстовых инпутов пустое, прячем (hide). Если все 5 пустые, то оставляем только один.
- Все изображения, кроме последнего, представлены в виде рисунка с минусом. Последний соответственно с плюсом.
- Если кликнуть мышью по изображению с плюсом (а такое изображение всегда последнее), то появляется еще один параграф, текущее изображение меняется на "-", а появившееся на "+" (так как оно теперь последнее).
- Если кликнуть по изображению с "-", то пока ничего не должно происходить. Пока это не важно.
В чем проблема:
- Если я первый раз кликну по изображению с плюсом, то появится новый параграф. Все правильно. Но теперь Если кликнуть по новому изображению, то ничего не произойдет. А вот если кликнуть по старому изображению (оно теперь со знаком минус, и то что с минусом - это правильно), то еще один новый параграф появится, хотя этого не должно происходить. Подскажите, в чем ошибка. Расписал все в комментариях, чтобы было проще найти ошибку.
<html>
<head>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<form action="" method="">
<p><input class="autocomplete" type="text" name="" value=""/><img src="images/minus.png" alt=""/></p>
<p><input class="autocomplete" type="text" name="" value=""/><img src="images/minus.png" alt=""/></p>
<p><input class="autocomplete" type="text" name="" value=""/><img src="images/minus.png" alt=""/></p>
<p><input class="autocomplete" type="text" name="" value=""/><img src="images/minus.png" alt=""/></p>
<p><input class="autocomplete" type="text" name="" value=""/><img src="images/minus.png" alt=""/></p>
</form>
<script>
// код вынес ниже, чтобы была подсветка
</script>
</body>
// прячем все параграфы, у которых value==""
$('.autocomplete:text[value=""]').parent().hide().children('img');
// $visibleImg - набор всех видимых img
var $visibleImg=$('.autocomplete:visible').next('img');
// $hiddenP - набор всех спрятанных параграфов
var $hiddenP=$('.autocomplete:hidden').parent();
// у самого последнего параграфа меняем изображение с "-" на "+"
$visibleImg.last().attr('src', 'images/plus.png');
// $minusImg - набор всех видимых изображений со знаком "-"
$minusImg=$visibleImg.filter('img[src*=minus]');
// plusImg - изображение (оно моежт быть только одно в орп период времени) со знаком "+"
$plusImg=$visibleImg.last();
// если нет ни одного видимого изображения, нужно один показать
if ($visibleImg.size()==0)
{
// показываем одно изображение
$hiddenP.first().show();
// сразу обновляем список спрятанных параграфов, так как он изменился
$hiddenP=$('.autocomplete:hidden').parent();
// тоже обновляем список видимых изображений
$visibleImg=$('.autocomplete:visible').next('img');
// меняем "+" на "-"
$visibleImg.last().attr('src', 'images/plus.png');
// по изображению plusImg как раз будем кликать мышью
$plusImg=$visibleImg.last();
}
// обработчик кликов по изображениям с "-"
$minusImg.click(function(){
// пока не важно
});
// обработчик кликов по изображению (может быть только один) с "+"
$plusImg.click(function(){
// меняем текущее изображение с "-" на "+"
$(this).attr('src', 'images/minus.png');
// показываем еще один параграф
$hiddenP.last().show();
// обновляем список спрятанных параграфов, так как он изменился
$hiddenP=$('.autocomplete:hidden').parent();
// обновляем список видимых изображений, так как он изменился
$visibleImg=$('.autocomplete:visible').next('img');
// plusImg - последнее видимое изображение, по нему будем кликать мышью след раз
$plusImg=$visibleImg.last();
// меняем знак последнего видимого изображения с "-" на "+"
$plusImg.attr('src', 'images/plus.png');
})
