切换div块 - 工作不正常

时间:2012-01-31 09:10:04

标签: javascript jquery

我有以下代码:

<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>

有两个divblock section-comments_for_photo类。

我希望用户点击Comment(iComment类),然后将数据加载到div(block section-comments_for_photo)。我的代码:

$(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;
            });
        });
    });

此代码加载数据但删除block review_block wrap中的所有html。哪里有问题?

的jsfiddle: JSFiddle

2 个答案:

答案 0 :(得分:1)

您错误地使用了jQuery.first。它没有达到您的预期。

改为使用find

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

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

更新了jsfiddle

答案 1 :(得分:0)

切换(400)表示它将在400毫秒内显示。 如果你想要显示更长的时间(例如4秒),你必须进行切换(4000)。