hide() и show() в jQuery
Такая задача.
На странице есть 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'); }) |
Проблема в том, что обработчик click не переназначается на новый элемент, решается делегированием: смотри в сторону методов delegate или live;
|
Часовой пояс GMT +3, время: 07:58. |