Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > Скрыть и показать div по клику

Автор: _Leo_ 18.1.2011, 10:43

Недавно познакомился с JQuery и вот в процессе освоения возник вопрос.

Дан такой HTML код:

<div class="head">Toyota</div>
<div class="avto" term="Toyota">
  Toyota_data
</div>
<div class="avto" term="Toyota">
  Toyota_data
</div>
<br>

<div class="head">Nissan</div>
<div class="avto" term="Nissan">
  Nissan_data
</div>
<div class="avto" term="Nissan">
  Nissan_data
</div>
<br>

Дана функция:

$(document).ready(function(){
  $('.head').click(function(){
    term_text = $(this).text();
    //alert(term_text);
    $('.avto').each(function(){
      if ($(this).attr('term') == term_text){
        if ($(this).attr('display') != 'none'){
          $(this).css('display', 'none');
        }
        else{
          $(this).css('display', 'block');
        }
      }
    });
  });
});

То есть, по клику на div class="head" необходимо скрыть или отобразить div class="avto" с term= тексту содержащемуся в div class="head".

С первого щелчка скрывается, а вот на второй уже не реагирует.

Подскажите пожалуйста, в чём проблема.

Автор: Mavrun 18.1.2011, 10:48

http://shublog.ru/javascript/kak-pokazat-i-skryt-tekst-na-javascript/

подойдёт?

а исходный код - особо не вникал, но напрягает код
if ($(this).attr('term') == term_text){
if ($(this).attr('display') != 'none'){
аттрибутов терм и дисплей не существует

Автор: ayax2005 18.1.2011, 11:42

jquery.toogle()

Автор: _Leo_ 1.2.2011, 14:36

Спасибо всем кто что то писал, задачу решил в тот же вечер, путём более внимательного чтония книги по Jquery.

HTML код:

<div class="head" term="Toyota">
Toyota
</div>
<div class="avto" term="Toyota">
  Toyota_data
</div>
<div class="avto" term="Toyota">
  Toyota_data
</div>
<br>

<div class="head" term="Nissan">
Nissan
</div>
<div class="avto" term="Nissan">
  Nissan_data
</div>
<div class="avto" term="Nissan">
  Nissan_data
</div>
<br>

<div class="head" term="Mazda">
Mazda
</div>
<div class="avto" term="Mazda">
  Mazda_data
</div>
<div class="avto" term="Mazda">
  Mazda_data
</div>

Jquery код:

$(document).ready(function(){
  $('.head').click(function(){
    term = $(this).attr('term');
    //alert(term_text);
    $('.avto').each(function(){
      if ($(this).attr('term') == term){
        if ($(this).css('display') == 'none'){
          $(this).css('display','block');
        }
        else {
          $(this).css('display','none');}

      }
    });
  });
});