Question

我有一个图片库，我想通过单击图片来打开模态并显示图片的详细信息，例如名称，标题和描述，我试图提醒消息

<img class="enent_inst" id="myImg" style="width:100%;" alt="<?php echo 
$events[$j]['title']; ?>" src="<?php echo base_url(); ?>/Event_gallary/<? 
php echo $events[$j]['event_image']; ?>" />

js端

$(document).on('click','#myImg',function(){
    alert('hello');
});

Answer 1

从$events[$j]['event_image']中我们可以清楚地看到，您发布的代码在循环中运行，因此将在同一文档中构造具有重复标识符的无效HTML结构，这将导致事件始终指向第一个事件具有#myImg标识符的元素。

建议改用公共类，以避免重复的id：

<img class="enent_inst" class="myImg" style="width:100%;" ...

在您的JS代码中，使用类选择器.myImg代替：

$(document).on('click','.myImg',function(){
    alert('hello');
});

Answer 2

在HTML中定义模态

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <button  class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>
</div>

然后将您的模式绑定到按钮

 <button title="OPEN MODAL type="button" class="btn" data-toggle="modal" data-target="#exampleModal">

Answer 3

您可以将图像数据（标题，名称，...）存储在数据属性中：

<img class="enent_inst" ... data-title="title" data-name="name" ... />

单击图像时，您可以访问此数据并将其设置为模态：

$(document).on('click','#myImg',function(){
    title = $(this).data('title');
    name = $(this).data('name');

    ... open modal and set title, name, ...
});

Answer 4

将计数器插入while循环：

$i = 0;

while (...) {
   ... // any code here

   $i++;
}

按图像将ID更改为数据目标：data-target="myImg_<?php echo $i; ?>（输出例如：myImg_1

并使用jQuery调用模式（ID为例如myImg_1）：

$('enent_inst').click(funltion(e){
   e.preventDefault();
   var modal = $(this).data("target");
   $(modal).modal('show'); 
});

如何通过单击<img/> id打开模式

4 个答案: