Как сделать предварительный просмотр iframe уникальным для каждого поста.Все мои предварительные просмотры показывают одинаковое содержание последнего поста на странице

Question

Я пытаюсь отладить проблему с моим кодом. Любая помощь будет высоко ценится.

Каждое сообщение на моем WordPress-сайте имеет диапазон, который при фокусировке на CSS :focus раскрывает всплывающее окно iframe, которое представляет собой предварительный просмотр ссылки в сообщении с уникальным идентификатором, эквивалентным идентификатору записи.

Пример ссылок с панели администратора для публикации в Wordpress:

Post 356 Content:
<a id="link356" href="www.exampleone.com"></a>

Post 411 Content:
<a id="link411" href="www.exampletwo.com"></a>

Post 202 Content:
<a id="link202" href="www.examplethree.com"></a>

Post 540 Content:
<a id="link540" href="www.examplefour.com"></a>

Ссылка в полном коде ниже с class="myPreButton" находится под каждым сообщением, это вызывает iframe, но iframe только просматривает последнее сообщение внутри цикла, а не каждый предварительный просмотр, загружая каждое сообщение отдельно.

$('iframe').attr('src', $("a#link" + theID).attr("href"));

Этот код предназначен для идентификатора ссылки каждого отдельного поста и делает ссылку на ссылку iframe этой ссылки.

Так что моя проблема в том, что посты 356, 411, 202 и 540 используют один и тот же предварительный контент, который извлекается из id="link540", который является последним постом на странице.

Я предполагаю, что проблема связана с PostID в самом скрипте или с циклом.

Вот мой код ниже:

   <?php 
    if (have_posts()) :
    while (have_posts()) : the_post(); ?>

    <div class="content">
                        <!-- EXAMPLE LINKS FROM ABOVE -->

    <p class="post-content"><?php the_content(); ?></p>

                        <!-- EXAMPLE LINKS FROM ABOVE -->
    </div>

<div class="preview">
    <a id="p2" class="myPreButton" href='javascript:void();' >
<span class="text">                          
    <div class="iframe-preview">
<script>
    $(document).ready(function link_ID(){

    var theID = '<?php the_ID(); ?>';

    $("a.myPreButton").hover(function(){  
         $('iframe').attr('src', $("a#link" + theID).attr("href"));                                 
                     }); });
            </script>

            <iframe id="iframe-preview" src="" style="border:0px #FFFFFF none;" name="iframe-preview-content" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="2000px" width="1000px"></iframe>

    </div>           
    </span>
    </a>
    </div>

<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
?>

Answer 1

В дополнение к моему комментарию выше, вот мое предложение;

1. Добавьте data-postid к каждой a ссылке, которая содержит post_id
2. Такжедобавьте data-postid к каждому iframe, содержащему post_id , чтобы создать ссылку между a и iframe.
3. Используйте их в своем javascript;

    $("a.myPreButton").hover(function(){
        let post_id = $(this).data("postid"); // This now contains your post id!
        let iframe = $("iframe[data-postid='" + post_id + "']"); // This gets the correct iframe using the post_id to match!
        let href = $(this).attr("href") + post_id; // This creates your new src

        iframe.attr('src', href); // This gets the current href and appends the postid
    })

<div class="preview">
    <a id="p2" class="myPreButton" href='javascript:void();' data-postid="<?php the_ID(); ?>">
        <span class="text">  <span class="text">
    </a>

    <div class="iframe-preview">
        <iframe id="iframe-preview" src="" style="border:0px #FFFFFF none;" name="iframe-preview-content" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="2000px" width="1000px" data-postid="<?php the_ID(); ?>"></iframe>
    </div>
</div>