在同一個div jQuery中獲取內容

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被點擊-顯示內容1 IMG2被點擊-空格，然后設置內容2 IMG3被點擊-空格，然后設置Content3

Answer 1

我們首先需要創建一個始終可見的“ display” 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());
     });
});