显示内容Jquery

Question

我试图在一个#中显示来自画廊的内容。目前我已经准备好了

Js

<script>
    $(document).ready(function() {
        $('.gallery-item').on('click', function(e) {
            $(".show-gallery-content").appendTo ("#showcontent").toggle();

        });
    });
</script>

index.php

<?php
            $args = array('post_type' => 'Gallery', 'order' => ASC);
            $loop = new WP_Query($args);
            while ($loop->have_posts()) : $loop->the_post($post_id);
                echo '<div class="gallery-item">';


                echo '<div class="gallery-image">';
                the_content();
                echo '</div>';
                echo '<div class="show-gallery-content">';
                echo '<div class="gallery-title">';
                the_title();
                echo '</div>';
                echo '<div class="gallery-excerpt">';
                the_excerpt();
                echo '</div>';
                echo '</div>';
                echo '</div>';


            endwhile;
?>

CSS

.show-gallery-content {
display:none;
}

当前网站-> http://erwin.my89.nl/stage/sieh/的实时预览

因此，当我单击一个图像时，我想让the_title() & the_excerpt显示在# show click中。

我昨晚过得很好，但是PhpStorm今天早上搞砸了，所以我现在真的很沮丧。

提前感谢！

此外，我想要一些背景资料，因为我是一个学生:-)！

Answer 1

请考虑一下这个片段：

$('.gallery-item').on('click', function(e) {
    $('#showcontent').empty().append($(this).find('.show-gallery-content').contents().clone());
});

Answer 2

试试这个：

<script>
$(document).ready(function() {
    $('.gallery-item').on('click', function(e) {
        $("#showcontent").append($(".show-gallery-content").html()).show();
    });
});
</script>

Answer 3

我认为您将照片链接到内容的方法不是优化的解决方案。无论如何，根据您的html结构，您需要在单击的图像与内容之间建立连接。你可以试试这个片段。

<script>
    $(document).ready(function() {
        $('.gallery-item').on('click', function(e) {
            $(this).children(".show-gallery-content").appendTo ("#showcontent").toggle();

        });
    });
</script>