Javascript 在 .this Click 上交换图像

Question

我试图在单击图像时执行简单的图像交换。我正在循环访问数据库，所以我有一堆“竖起大拇指”的图像。当用户单击其中一张图像时，我希望该特定图像变成绿色。两个图像名称是“thumbs_up.png”和“thumbs_up_green.png”

我可以使用“.this”让图像消失，但不知道如何进行图像交换。任何帮助都会很棒!谢谢!

这是我的脚本:

<script>
    function thumbTip(element){
        var name = element.name;
        $(element).hide();
    }
</script>

这是我的 HTML:

<table width='100%' class='test'>
    <tr>
        <td><span class='test'>$p[first_name]</span></td>
        <td align='center'><span class='test'>$p[date_time]</span></td>
    </tr>
    <tr>
        <td width='87%'><span class='test2'>$p[tip]</span></td>
        <td width='13%' align='center'>
            <span class='test3'>
                <a href='#' onClick='thumbTip(this)'>
                    <img src='../images/thumbs_up.png' width='25' scalefit='1' />
                </a>
            </span>
        </td>
    </tr>
</table>

Answer 1

正如您已标记 jQuery 一样。将给出 jQuery 解决方案..

$('.test3 a').on('click', function(e) {
    e.preventDefault();
    var $img = $(this).find('img');

    $img.attr('src', function(_,s) {
         return s.indexOf('thumbs_up_green') > -1 ? '../images/thumbs_up.png'
                                                  : '../images/thumbs_up_green.png'
    });
});

只需根据条件交换图像的 src 属性即可。