javascript - 获取同一 div 中的内容 jQuery

Question

我的网站上有一个画廊，每个画廊都有一个唯一的 ID。我正在努力让这个想法发挥作用:点击第一张图片=第一张图片的内容。点击第二张图片=第二张图片的内容..等等等等

目前我已经为每个图像设置了唯一的 ID，如下所示:

echo "<img src='http://bsc.ua.edu/wp-content/uploads/2012/01/white-placeholder-100x100.jpg' data-original='$thumbnail[0]' width='$thumbnail[1]' height='$thumbnail[2]' class='lazygallery' id='$thumb_id'/>";

通过 jQuery，我可以一一获取屏幕上的所有内容。因此，如果我单击 img1，我会得到内容 1。

有 2 个循环，一个用于缩略图，一个用于内容:缩略图:

echo '<div class="gallery">';
while ($loop->have_posts()) : $loop->the_post($post->ID);
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'gallery-thumb', true, '');
$thumb_id = get_the_ID();
echo "<img src='http://bsc.ua.edu/wp-content/uploads/2012/01/white-placeholder-100x100.jpg'  data-original='$thumbnail[0]' width='$thumbnail[1]' height='$thumbnail[2]' class='lazygallery'  id='$thumb_id'/>";
endwhile;
echo '</div>';

内容循环几乎相同，但只是其中的其他函数(例如 the_content() 和一堆自定义内容)。

我当前的脚本:

<script>
    $(document).ready(function () {
        $('#<?php echo $thumb_id ?>').on('click', function () {
            var idimg = $(this).attr('id');

            alert('Id: ' + idimg);
            $('.content_<?php echo $thumb_id ?>').toggle();

        });
    });
</script>

完整问题我怎样才能让脚本像这样工作:Img1 被点击 - 显示 Content1Img2 被点击 - 清空 div，然后设置 Content2Img3 被点击 - 清空 div，然后设置 Content3

Answer 1

我们首先需要制作一个始终可见的“显示”div。

例如:

 <div id="information"></div>

使用这样的 CSS:

 #information {
     position:fixed;
     margin-top:50px;
     margin-left:50px;
     background-color:grey;
 }

这个div会显示我们点击的图片的信息。

现在要使用信息实际更新此 div，我们执行以下操作:

$(document).ready(function () {
     $('#<?php echo $thumb_id ?>').on('click', function () {
         // get the correct content id
         var idimg = $(this).attr('id');
         var contentId = '.content_' + idimg;  

         // update information div
         $('#information').html($(contentId).html());
     });
});