Question

我的网站上有一个图库，每个图库都有一个唯一的ID。我试图让这个想法奏效：单击第一个图像=第一个图像的内容。点击第二张图片=第二张图片的内容等等。

Currenlty我已经为每个图像设置了一个唯一的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 - 显示Content1 单击Img2 - 清空div，然后设置Content2 单击Img3 - 清空div，然后设置Content3

Answer 1

我们首先要做一个＆＃39;显示＆＃39;总是可见的div。

E.g：

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

获取相同div jQuery中的内容

1 个答案: