jquery - 使用 Image 作为带有 jquery、html 和 css 的事件触发器

Question

我正在使用 css、jquery 和 html 开发一个 proyect 网站。发生的事情是，在 html 中，我有一个只有 3 列的表格，我正在放置图像以用作按钮来切换按钮下方的内容。这是代码：

<table id='buttom-service'>
            <tr>
                <td class="selectors">
                    <img src="images/icon1.png" id='ser_bt1'alt="Radiocomunicacion" />
                </td>
                <td class="selectors">
                    <img src="images/icon2.png" id='ser_bt2' alt="Arquitectura" />
                </td>
                <td class="selectors">
                    <img src="images/icon3.png" id='ser_bt3' alt="Radiocomunicacion"/>
                </td>
            </tr>
        </table>

现在，我使用 jquery 将图像用作按钮：

$(document).ready(function(){
   //default load
   $('#buttom-service').addClass('hover');

   //action buttoms
   $('#ser_bt1').click(function(){
    do stuff;

   });
   $('#ser_bt2').click(function(){
    do stuff;

   });
   $('#ser_bt3').click(function(){
    do stuff

   });});

这样做的问题是前 2 个图像中的 clicable 区域减少到图像的下部而不是整个图像，而第三个元素工作正常。（顺便说一句，他们切换内容很好）我需要一些关于如何使三个图像正确地作为按钮工作的建议。（可循环区域）

谢谢你

Answer 1

关于什么...？

$('#ser_bt1,#ser_bt2,#ser_bt3').closest('.selectors').on('click',function(){
    //do stuff
});

Answer 2

尝试使用按钮标签。将点击监听器附加到按钮上，并将图像设置为 css 中按钮的背景。