带按钮的模态缩略图

时间:2016-03-10 08:52:54

标签: javascript php jquery mysql

单击第二个按钮(标记为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>

这是modal

这是我从数据库中获取项目的代码。 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按钮时,

这个result。但是当我点击图像2时,没有任何反应。意思是什么都没有获得我认为这是因为它具有相同的ID。我不确定。请帮帮我。我希望这很清楚。非常感谢。我将感激你的帮助!谢谢!

1 个答案:

答案 0 :(得分:0)

您使用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>