$(".head").click(function() {
$(this).find(".avto").toggle();
});
Скрыть и показать div по клику JQuery
Недавно познакомился с 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".
С первого щелчка скрывается, а вот на второй уже не реагирует.
Подскажите пожалуйста, в чём проблема.
Дан такой 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".
С первого щелчка скрывается, а вот на второй уже не реагирует.
Подскажите пожалуйста, в чём проблема.
По идее, term вообще не нужен.
У вас же вообще jQuery, честно говоря, не слишком напрямую по назначению использован, ибо не надо юзать display-атрибут, используйте предусмотренные в фреймворке show()/hide()/toggle() и аналогичные (названия не помню уже).
Код:
У вас же вообще jQuery, честно говоря, не слишком напрямую по назначению использован, ибо не надо юзать display-атрибут, используйте предусмотренные в фреймворке show()/hide()/toggle() и аналогичные (названия не помню уже).
Спасибо всем кто что то писал, задачу решил в тот же вечер, путём более внимательного чтония книги по 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>
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');}
}
});
});
});
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>
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');}
}
});
});
});
Только все равно не правильно, точнее "некорректно" и "неразумно".
Менее безумный вариант без использования jQuery:
Скрипт:
Контейнер-невидимка:
Например, кнопка-переключатель:
Фрагмент CSS:
Скрипт:
Код:
function toggle_visibility(id)
{
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
{
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
Контейнер-невидимка:
Код:
<div id='my_div' class='div_container'>
<!-- Содержимое, которое надо скрыть -->
</div>
<!-- Содержимое, которое надо скрыть -->
</div>
Например, кнопка-переключатель:
Код:
<input type='button' value='Показать DIV' onclick="toggle_visibility('my_div')">
Фрагмент CSS:
Код:
.div_container{display: none;}