Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Добавить появляющийся блок (https://javascript.ru/forum/jquery/46729-dobavit-poyavlyayushhijjsya-blok.html)

Зосимов 21.04.2014 15:38
Добавить появляющийся блок
 
Всем привет.
Я делаю добавление контента посредством JS -
$('ul').append(
		'<li><div id="line1">' + val.club + '</div><div class="detail">То что будет показано при клике</div></li>');


а вот дивку с классом detail я хотел бы показывать при нажатии по кнопке 
$(".btn").click(function(){ 
        $('.detail').slideToggle("fast");
   });


Но дело в том, что у меня много линий (li), а показать detail мне нужно именно для той, где была кликнута кнопка.

Подскажите пожалуйста - возможно ли так сделать?

рони 21.04.2014 15:48
Зосимов,
а где кнопа btn?

Зосимов 22.04.2014 07:14
Цитата:
Сообщение от рони (Сообщение 308638)
Зосимов,
а где кнопа btn?
 
<li><button class="btn">кнопка</button><div id="line1">' + val.club + '</div><div class="detail">То что будет показано при клике</div></li>


может даже тут быть.
но суть в том, что бы открыть для каждой строки свой deatail

krasovsky 22.04.2014 08:02
При твоей разметке такой код
$(".btn").click(function(){
        $(this).parent().find('.detail').slideToggle("fast");
   });

Зосимов 22.04.2014 08:15
Цитата:
Сообщение от krasovsky (Сообщение 308716)
При твоей разметке такой код
$(".btn").click(function(){
        $(this).parent().find('.detail').slideToggle("fast");
   });
сори. немного изменил код, так как с кнопкой почему то не работает.
сделал так 
$('ul.'+liDay).append(
		'<li><div id="line1">Название клуба</div><br /><div class="detail">То что будет показано при клике</div></li>'); 
          });
    });

   $("li").click(function(){ 
     $(this).parent().find('.detail').slideToggle("fast");
   });


но в этом случае, показываются все detail для всех li при клике (

Зосимов 22.04.2014 08:20




вот так получается при клике на строку ..

krasovsky 22.04.2014 12:48
Цитата:
Сообщение от Зосимов (Сообщение 308718)
сори. немного изменил код, так как с кнопкой почему то не работает.
сделал так 
$('ul.'+liDay).append(
		'<li><div id="line1">Название клуба</div><br /><div class="detail">То что будет показано при клике</div></li>'); 
          });
    });

   $("li").click(function(){ 
     $(this).parent().find('.detail').slideToggle("fast");
   });


но в этом случае, показываются все detail для всех li при клике (
ну так убери парент )) Совсем не смотрел код что ли )
$("li").click(function(){ 
     $(this).find('.detail').slideToggle("fast");
   });

Зосимов 24.04.2014 09:41
Цитата:
Сообщение от krasovsky (Сообщение 308750)
ну так убери парент )) Совсем не смотрел код что ли )
спасибо большое.

а не можете подсказать - почему все таки клик по кнопке в данном случае не работает? 

$('ul.'+liDay).append(
        '<li><div id="line1">Название клуба</div><br /><div class="detail">То что будет показано при клике</div><button class="btn">Показать</button></li>);
          });
    });
 
   $(".btn").click(function(){
    $(this).find('.detail').slideToggle("fast");
   });


может кнопка так сказать появляется позже, и на нее не привязывается событие клик?

рони 24.04.2014 09:57
Цитата:
Сообщение от Зосимов
$(this).find('.detail').
$(this).prev().


Часовой пояс GMT +3, время: 07:36.