Question

我想创建一个具有名称，类和ID的可点击图像，如果我点击该图像，它应该显示该图像的id而不使用数据库或post。例如：

<div class='widget-content' style="min-height: 300px;">  
       <img src="images/icons/running.jpg" 
        id="runningDrop"
        class="droplink" />
       <img src="images/icons/swimming.jpg" 
         id="swimmingDrop"
         class="droplink" />
 </div>

如果我点击其中一张图片，则应显示ID swimmingDrop或runningDrop。

Answer 1

我建议使用jquery，因为它会让生活更轻松：

$('img').on({
    click: function(){
        alert($(this).attr("id"));
    }
})

Answer 2

只需onclick="alert(this.id)"

＆＃13;

<div class='widget-content' style="min-height: 300px;">  
       <img src="images/icons/running.jpg" 
        id="runningDrop"
        class="droplink" 
        onclick="alert(this.id)"/>
       <img src="images/icons/swimming.jpg" 
         id="swimmingDrop"
         class="droplink" 
         onclick="alert(this.id)"/>
 </div>

＆＃13;

正如我在评论中所说，当你标记jquery时，这是jquery解决方案

＆＃13;

$('img').on('click', function(){ alert($(this).attr('id')) });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='widget-content' style="min-height: 300px;">  
       <img src="images/icons/running.jpg" 
        id="runningDrop"
        class="droplink"/>
       <img src="images/icons/swimming.jpg" 
         id="swimmingDrop"
         class="droplink"/>
 </div>

＆＃13;

Answer 3

<html>
    <head>
        <title>sample Page</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

    <script>

        $(document).ready(function () {

            $('img').click(function () {
                alert($(this).attr("id"));
            });

        });


    </script>
    </head>
    <body>
     <div class='widget-content' style="min-height: 300px;">  
       <img src="images/icons/running.jpg" 
        id="runningDrop"
        class="droplink" />
       <img src="images/icons/swimming.jpg" 
         id="swimmingDrop"
         class="droplink" />
 </div>
    </body>
    </html>

属于我的价值

3 个答案: