我的图像响应模式仅显示数据库中的第一行图像答案

【问题标题】：my modal in image responsive show only first row image from database我的图像响应模式仅显示数据库中的第一行图像
【发布时间】：2016-08-21 15:00:31
【问题描述】：

我尝试为我的数据库中的所有图像缩略图制作响应式图像。缩略图正在显示，但是当我单击它时，它只显示第一张图像。为什么会这样？

这是查看文件

中的几行代码

<div data-toggle="modal" data-target="#myModal">
  <table id="dynamic-table" method="post" class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>No</th>
        <th>Nama Lengkap</th>
        <th>Tanggal Mulai</th>
        <th>Tanggal Akhir</th>
        <th>Alasan</th>
        <th>File</th>
        <th>Nopeg</th>
        <th>Status</th>
      </tr>
    </thead>

    <tbody>
      <?php foreach ($hasil->result() as $row) { ?>
      <tr>
        <td>
          <?php echo $row->no ?></td>
        <td>
          <?php echo $row->nama ?></td>
        <td>
          <?php echo $row->tglm ?></td>
        <td>
          <?php echo $row->tgla ?></td>
        <td>
          <?php echo $row->alasan ?></td>

        <td>

          <img src="<?php echo base_url().'uploads/'.$row->file ?>" height="75">

          <div id="myModal" class="modal fade" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-body">
                  <img src="<?php echo base_url().'uploads/'.$row->file ?>" class="img-responsive">
                </div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <?php echo $row->nopeg; ?></td>
        <td>
          <button type="button" class="btn btn-pink btn-sm">Terima</button>
          <button type="button" class="btn btn-info btn-sm">Tolak</button>
        </td>
      </tr>
      <?php } ?>
    </tbody>
  </table>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#myModal').on('show.bs.modal', function(e) {
        var image = $(e.relatedTarget).attr('src');
        $(".img-responsive").attr("src", image);
      });
    });
  </script>
</div>

这是来自 model

的代码

<? php

class Model_data_cuti extends CI_Model {

  public

  function getdata() {
    $hasil = $this - > db - > query("SELECT * FROM form");
    return $hasil;

  }
  public

  function create($data_form) {
    $this - > db - > insert('form', $data_form);
  }
  public

  function find($no) {
    $hasil = $this - > db - > where('no', $no) - > limit(1) - > get('form');
    if ($hasil - > num_rows() > 0) {
      return $hasil - > row();
    } else {
      return array();
    }
  }
} ?>

这是来自控制器

<? php
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Data_cuti extends CI_Controller {
  function __construct() {
    parent::__construct();
    $this - > load - > model('model_data_cuti');
  }
  public
  function index() {

    $data['hasil'] = $this - > model_data_cuti - > getdata();
    $this - > load - > view('data_cuti_view', $data);

  }
} ?>

这是结果页面 enter image description here

查看文件列。如果我单击图像，它只显示第一行的图像。当我点击其他图片时，它也会显示第一张图片。

【问题讨论】：

JS部分是否正确？ e.relatedTarget 不应该报错吗？
我不知道。我只是从某个地方粘贴它，希望发生一些事情。但没有出现错误
嗯等等我在 sn-p "$('#myModal').on('show.bs.modal', function (e)" 中删除了这一行。@MargaretBloom。
哦，这让 much 更有意义了。编辑问题（在标记行下方，左下角有一个 edit 按钮）以添加缺少的代码。
@MargaretBloom 已完成编辑。我想我与 $row->file 图像响应模态有关。比如stackoverflow.com/questions/17923614/…。但我不知道该怎么做。我是 codeigniter 和 bootstrap 的新手

标签： image twitter-bootstrap-3 codeigniter-3

【解决方案1】：

我在你的 view 代码中看到，你试图通过 e.relatedTarget 用于修改您的模态。

错误：

你确实循环了模态，但声明相同的id，它是这样写的：

<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">

如果您在浏览器中检查该元素，您会发现您有很多具有相同 id 的模态框。

方法解决方案：

只需将模态从循环条件中移出，并尝试通过onclick事件侦听器在您的真实图像中对其进行修改。

提供的代码（未经测试）：

<td> <img onclick="photoModal('<?php echo base_url().'uploads/'.$row->file ?>');" src="<?php echo base_url().'uploads/'.$row->file ?>" height="75">

<script>
  function photoModal(imgPath){
        $('#myModal < div < div < div <img').attr("src",imgPath);
        $('#myModal').modal('show');
  }
</script>

说明因此，当您单击图像时，它将触发 function photoModal() 将 src 属性发送到 Modal 并对其进行处理以更改 Modals 内部的 src 图像

【讨论】：

所以你的意思是我应该删除模态？我试过了，和你的一样。但它变得没有响应。
我的意思是把它从循环中移出.. :D keluarin dari kondisi loop.
我不知道在哪里移动模态>.pastebin.com/E2vXeN0v
我怀疑我的 js 委托.. 我必须尝试您的实际代码.. 您是否将您的程序托管到在线？
嗯..还没有..你想试试吗？也许我可以通过电子邮件发送它

【解决方案2】：

我已经用一些代码欺骗了它。我的目的是使图像更大，以便用户阅读。 ps：我已经把模态框去掉了。

这是我在 view

中的代码

<table id="dynamic-table" method="post" class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>No</th>
      <th>Nama Lengkap</th>
      <th>Tanggal Mulai</th>
      <th>Tanggal Akhir</th>
      <th>Alasan</th>
      <th>File</th>
      <th>Nopeg</th>
      <th>Status</th>
    </tr>
  </thead>

  <tbody>
    <?php foreach ($hasil->result() as $row) { ?>
    <tr>
      <td>
        <?php echo $row->no ?></td>
      <td>
        <?php echo $row->nama ?></td>
      <td>
        <?php echo $row->tglm ?></td>
      <td>
        <?php echo $row->tgla ?></td>
      <td>
        <?php echo $row->alasan ?></td>

      <td>
        <a class="thumbnail" href="<?php echo base_url().'uploads/'.$row->file ?>">	
	<img src="<?php echo base_url().'uploads/'.$row->file ?>" width="50" height="50">
	</a>

      </td>

      <td>
        <?php echo $row->nopeg; ?></td>
      <td>
        <button type="button" class="btn btn-pink btn-sm">Terima</button>
        <button type="button" class="btn btn-info btn-sm">Tolak</button>
      </td>
    </tr>
    <?php } ?>
  </tbody>
</table>

如果您有其他方法可以使模态正常工作，请告诉我。谢谢。 ^^,

【讨论】：