javascript — получить содержимое в том же Div JQuery

Question

javascript — получить содержимое в том же Div JQuery

У меня на сайте есть галерея с каждым из них уникальным идентификатором. Я пытаюсь заставить эту идею работать:
Нажмите на первое изображение = содержание первого изображения. Нажмите на второе изображение = содержание второго изображения … и т. Д. И т. Д.

В настоящее время я установил для каждого изображения уникальный идентификатор, как показано ниже:

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

1

javascript jquery onclick php wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Сначала нам нужно сделать div «display», который всегда виден.

Например.:

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

1