带按钮的模式上的缩略图

Thumbnail on modal with button

本文关键字：略图 模式 按钮      更新时间：2023-09-26

当我单击第二个按钮（标记为 image2）时，我无法获取第二个项目的值。我怎么能得到它？只有第一个按钮能够获取该值。这是我的代码。请帮助我，谢谢。

<div id="div1" align="center" style="margin-top: 20px;">
    <div style="width: 150px; height: 150px; border: solid 1px;" align="center">
        <img src="img/default.jpg" alt="no image" style="width: 95%; height: 95%; margin-top: 5px ;">
    </div>
    <div style="width: 150px; border: solid 1px;" align="center">
        <button class="btn btn-md btn-danger"><i class="glyphicon glyphicon-ok-circle" style="font-size: 15px;"></i></button>
        <button class="btn btn-md btn-warning"><i class="glyphicon glyphicon-remove"></i></button>
        <button class="btn btn-md btn-success" data-toggle="modal" data-target="#imgmodal"><i class="glyphicon glyphicon-folder-open"></i></button>
    </div>
</div>
<div id="imgmodal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" align="center">
                <h3>TECHNICIANS</h3>
            </div>
            <div class="modal-body">
                <?php include("getTech.php") ?>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#btnSelectImg").click(function(){
            alert(document.getElementById('btnSelectImg').textContent);
        });
    });
</script>

这是模态

这是我从数据库中获取项目的代码。 getTech.pph 

<?php 
$conn = new mysqli("localhost","root","","test");
$sql = "SELECT * FROM tbl_image";
if($conn->connect_error){
    die("FAILED TO CONNECT : " . $conn->connect_error);
}
$result = mysqli_query($conn, $sql);

if($result->num_rows>0){
    while($row = $result->fetch_assoc()){
        $imgname = $row['_imageName'];
        $imgpath = $row['_imagepath'];
        // echo "<script> alert(); </script>";
        echo "<div id='divImg' style='margin-left: 5px; margin-top: 20px; display: inline-block;' align='center'>";
        echo "<img src='". $imgpath. "' alt='no image' class='img-thumbnail'><br>";
        echo "<button class='btn btn-deafult' id='btnSelectImg' style='margin-top: 5px;'>".$imgname."</button>";
        echo "<input type='hidden' id='path' value='". $imgpath."'>";
        echo "</div>";
    }
} 
?>

当我单击图像 1 按钮时，会出现这个结果。 但是当我单击图像 2 时，什么也没发生。 这意味着什么都没有获得。我认为那是因为它具有相同的id。我不确定。请帮我解决这个问题。我希望这已经足够清楚了。多谢。我会感谢您的帮助！谢谢！

您使用 id btnSelectImg表示两个按钮。 id 应该是唯一的。

在getTech中.php改变 

echo "<button class='btn btn-deafult' id='btnSelectImg' style='margin-top: 5px;'>".$imgname."</button>";

自 

echo "<button class='btn btn-deafult btnSelectImg'  style='margin-top: 5px;'>".$imgname."</button>";

然后

<script type="text/javascript">
    $(document).ready(function(){
        $(".btnSelectImg").click(function(){
            alert($(this).text());
        });
    });
</script>
相关文章：