Показать сообщение отдельно
  #1 (permalink)  
Старый 15.07.2011, 18:18
Аватар для antserg
Аспирант
Отправить личное сообщение для antserg Посмотреть профиль Найти все сообщения от antserg
 
Регистрация: 14.05.2011
Сообщений: 61

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');
      })
Ответить с цитированием