通过单击左箭头或右箭头或从 PHP 中的缩略图库中选择实际图像来更改主图像答案

【问题标题】：change main image by click left or right arrow or selecting actual image from thumbnail gallery in PHP通过单击左箭头或右箭头或从 PHP 中的缩略图库中选择实际图像来更改主图像
【发布时间】：2018-06-01 12:36:50
【问题描述】：

我正在开发一个 pdf 书页查看器，我的 mysql 数据库中有很多书有 100 多页。所以我将书页提取到我的缩略图库中，如果我选择该图像，它会将 img src 添加到主图像并将其显示在主图像 div 上，效果很好，这里我在主图像旁边有左右箭头按钮，如果我单击这些按钮，图像应该选择下一个图像或上一个图像。我试图得到这个想法并尝试不同的来源我无法获得输出，请帮助我，我在下面添加了我的代码，

PHP

<button class="left-arrow" id="left-arrow">Left</buttom>
<img src="" alt="book" class="main-img" id="main-img">
<button class="right-arrow" id="right-arrow">Right</buttom>

<ul class="book-list id="book-list">
   <?php if ($total_page > 0) : ?>
    <?php foreach ($results as $row) : ?>
     <li class="book p-2">
     <span class="page-number"><?php echo $page_num++ ?></span>
     <img src="<?php echo PAGE_URL . "/" . $b_id . "/" . $row->page_name ?>" alt="Book Image">
     </li>
    <?php endforeach ?>
   <?php endif ?>
 </ul>

JavaScript

<script type="text/javascript">
    var bookPageList = $('#book-list');
    $(bookPageList).click(displayImage);

    function displayImage(e) {
        if (e.target !== e.currentTarget) {
            var target = e.target;
            var src = target.src;
            // console.log(src);
            $('#main-img').attr('src', src);
        }
    }
</script>

【问题讨论】：

这里没有数据库代码。
它只是普通的数据检索代码，所以我没有添加，你想要我的查询代码吗？
如果它被标记为 MySQL，那么数据库代码可能与问题有关。如果不是，则剪掉该标签以专注于手头的实际问题，无论是什么。
注意到了。谢谢你的提示
您确定target.src 正在返回正确的值吗？您可能需要执行 $(e.target).attr('src') 或者，如果 this 被正确设置为“被点击的东西”，那么 $(this).attr('src') 无需深入了解事件对象。

标签： javascript php

【解决方案1】：

我已经在这个链接中解决了这个问题，希望这对其他新手有所帮助

Change image by selecting from thumbnail or next prev buttons

【讨论】：