如何使模式内的图像可点击

Question

我有一个按钮，它显示一个包含许多图标的模式，当我单击其中一个图像时，我想要它，它将表明我已经单击了它。但我不知道如何实现它。

到目前为止，这就是我的模态框的样子。

我的目标：放置一个我点击过的指标。

代码

<div class="modal-body">
    <div class="row">
        <div class="col-lg-6 pull-left">
            <?php 
                $tokenSql = mysql_query(" SELECT * FROM topplayer WHERE user_id = '$user_id' ");
                $retToken = mysql_fetch_assoc($tokenSql);
                $token = $retToken['token'];
                echo ("<b>Tokens : $token </b><br>");
             ?>
        </div>
        <div class="col-lg-6 pull-right">
        </div>
     </div>
        <div class="row ml">
            <?php 
                $sendGiftSql = mysql_query("SELECT * FROM gifts WHERE isDelete = 'false' ORDER BY price ");
                while($sendGift = mysql_fetch_assoc($sendGiftSql)){
                        $giftIMG = $sendGift['img_path'];
                        echo("
                            <div class='col-xs-4 mb'>
                              <br>
                              <img id='edgiftPhoto'  class='center-block' alt='No image' src='$giftIMG' style='height:120px; width: 120px'/>&nbsp;
                            </div> 
                    ");
                }
            ?>
</div>

Answer 1

通用，超级超级超级简单的解决方案。不需要插件。

JS：

$('.modal-body').on('click','img',function(){
    $(this).toggleClass('clicked');
})

CSS：

.clicked{
    border:1px solid black;
    //style it however you want
}