获取相同div jQuery中的内容-Java 学习之路

我的网站上有一个画廊，每个画廊都有一个唯一的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>

Full Question How can I get the script too work like this: Img1 gets clicked - show Content1 Img2 gets clicked - empty the div, then set Content2 Img3 gets clicked - empty the div, then set Content3

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

回复于 2024-05-17T01:40:20+08:00

获取相同div jQuery中的内容

1 回答

相关问题