Skip to main content

toogle div block - work not properly



I have a following code:







<div class="block review_block wrap"><ul class="comments_list">

<li class="comment">

<div class="poster">

<img width="60px" height="75px" src="/Image/GetImage?imageName=3c52a0f1-92ee-45ee-bd25-bdd5bfc0954f.jpg">

</div>

<!-- .poster-->

<div class="comment_content">

<div class="date">

29.01.2012 9:36:59</div>

<div class="nickname">

<a href="#">

Ослик Иа</a></div>

<div class="review_text">

<a>

Рецензия 3</a>

</div>

<p class="text">

Нельзя сказать, что сюжетная линия предсказуема (только в паре моментов), и поэтому с наслаждением зал наблюдал, как Холмс снова и снова поражал нас своими дедуктивными способностями. Да и Ватсон от него не отставал и всегда на подмогу приходил. В сравнении с первой частью юмора стало больше, но он <span class="ellipses" style="display: inline;">...</span>

<span class="more-text" style="display: none;">

не достигает той грани, когда понимаешь, что сценаристы перестарались с шутками, делая на них слишком высокую ставку. А уж переживаний прибавилось столько, что просто сердечко так и надрывалось. Прослезилась в нескольких местах, а в одном и просто всплакнула. Но, тут без спойлеров.



А сейчас, я скажу о сцене, которая по моему мнению должна быть как-то действительно оценена. Это сцена погони в лесу. Настолько динамично, энергично, невообразимо и захватывающе, что слов не хватает. Наслаждаешься каждой секундой, каждым кадром. Эта сцена даже зрителю передаёт свои силы. Просто браво!



Так что заставила меня «игра теней» возвращать домой с широкой улыбкой на лице, а зал аплодировал очень громко и звонко, за что ему отдельное спасибо.</span>



</p>

<ul class="info list wrap">

<li><a class="iComment">Comment</a> (0)</li>

<li><a class="iSocial iThanks" href="#">Спасибо!</a></li>

<li><a class="iSocial iComplain" href="#">Пожаловаться</a></li>

<li><a class="iSocial code" href="#">Код для блога</a></li>

</ul>

</div>

<!-- .comment_content-->



<div class="widgets">

<div class="rating_block">

<div class="stars_rating">

<div class="stars_off">

</div>

<div style="width: 0%" class="stars_on">

</div>

</div>

<!-- .stars_rating-->

<i class="lli"></i>

<div style="z-index: 0;" class="expand">



<span class="iSocial iSmile">0</span></div>





<!-- .rating_block-->

<div style="display: none;" class="voice_block">



<div publicationid="3" type="Publication" eventid="4" class="going">

<a href="">Я пойду!</a>

<div id="going_too">

Уже идут: 0</div>

</div>



<!-- .going-->

<div class="data_for_rating">

<div>

Голосовать</div>

<div class="star_for_rating">

<ul>

<li><a href="#">1</a> </li>

<li><a href="#">2</a> </li>

<li><a href="#">3</a> </li>

<li><a href="#">4</a> </li>

<li><a href="#">5</a> </li>

</ul>

</div>

<!-- .star_for_rating-->

<div>

Средний бал: 0

(0)</div>

</div>

<!-- .data_for_rating-->

</div>

<!-- .voice_block-->

</div>

<!-- .widgets-->

</div></li>

<!-- .comment-->



<div class="block section-comments_for_photo" style="display: none;"></div>







<li class="comment">

<div class="poster">

<img width="60px" height="75px" src="/Image/GetImage?imageName=2e722edb-8649-43af-b468-a2b489c467fb.jpg">

</div>

<!-- .poster-->

<div class="comment_content">

<div class="date">

29.01.2012 9:36:22</div>

<div class="nickname">

<a href="#">

Антон</a></div>

<div class="review_text">

<a>

Рецензия 2</a>

</div>

<p class="text">

Авторы ушли из Лондона, и это действительно хороший ход. Атмосфера и краски остались теми же, но место событий поменялось, и всё менялось и менялось по ходу действия фильма. Временами всё было так красиво, что аж дух захватывало. Хотелось суметь уловить каждую деталь, каждый миллиметр, но всё было т<span class="ellipses" style="display: inline;">...</span>

<span class="more-text" style="display: none;">

ак динамично, что это сделать было достаточно сложно. Хотя этот факт ни сколечко не уменьшает прекрасность «Игры теней». Атмосферу помогала поддерживать всё так же великолепная музыка Ханса Циммера, которая местами была точь-в-точь как и в первом фильме. Что особенно касается титров, которые всё такие же привлекательные, и прошлая музыка им ни капельки не мешает, а наоборот, только навивает приятные воспоминания об ощущениях, которые возникли в своё время после просмотра предыдущей ленты в такой же момент титров, когда люди начали вставать и потихоньку уходить из зала с интересом глядя на экран.</span>



</p>

<ul class="info list wrap">

<li><a class="iComment">Комментировать</a> (0)</li>

<li><a class="iSocial iThanks" href="#">Спасибо!</a></li>

<li><a class="iSocial iComplain" href="#">Пожаловаться</a></li>

<li><a class="iSocial code" href="#">Код для блога</a></li>

</ul>

</div>

<!-- .comment_content-->



<div class="widgets">

<div class="rating_block">

<div class="stars_rating">

<div class="stars_off">

</div>

<div style="width: 0%" class="stars_on">

</div>

</div>

<!-- .stars_rating-->

<i class="lli"></i>

<div style="z-index: 0;" class="expand">



<span class="iSocial iSmile">0</span></div>





<!-- .rating_block-->

<div style="display: none;" class="voice_block">



<div publicationid="2" type="Publication" eventid="1" class="going">

<a href="">Я пойду!</a>

<div id="going_too">

Уже идут: 0</div>

</div>



<!-- .going-->

<div class="data_for_rating">

<div>

Голосовать</div>

<div class="star_for_rating">

<ul>

<li><a href="#">1</a> </li>

<li><a href="#">2</a> </li>

<li><a href="#">3</a> </li>

<li><a href="#">4</a> </li>

<li><a href="#">5</a> </li>

</ul>

</div>

<!-- .star_for_rating-->

<div>

Средний бал: 0

(0)</div>

</div>

<!-- .data_for_rating-->

</div>

<!-- .voice_block-->

</div>

<!-- .widgets-->

</div></li>

<!-- .comment-->



<div class="block section-comments_for_photo" style="display: none;"></div>



</ul></div>







There are two div with block section-comments_for_photo class.





I want that user clicks on Comment ( iComment class) then data loading into div( block section-comments_for_photo ). My code:







$(document).ready(function() {

$('.block.section-comments_for_photo').each(function() {

$(this).hide();

});

$(".iComment").click(function() {

var id = <%=Model.OID %> ;

var section = $(this).closest(".comments_list").first(".block.section-comments_for_photo");

$(section).load("/Publication/GetCommentsForPublication?id=" + id, function() {

$(this).toggle(400);

return false;

});

});

});







This code loads the data but it delete all html from block review_block wrap . Where is problem?





Thanks.





UPDATE: JSFiddle


Comments

  1. You wrongly use jQuery.first. It doesn't do what you expect it to.

    Use find instead.

    $(".iComment").click(function() {
    var section = $(this).closest(".comments_list").find(".block.section-comments_for_photo");

    $(section).toggle(400);
    return false;
    });


    Updated jsfiddle.

    ReplyDelete
  2. toggle(400) meens that it will be shown during 400 milliseconds.
    If you want to show it for a longer time (eg 4 seconds) you have to put toggle(4000).

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...

Is it possible to have IF statement in an Echo statement in PHP

Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.