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属性。

Answer 2

在下面你将有两个css类，其中的图像名为thumbs-up和thumbs-up-green，每次只是切换元素上的哪一个。

function thumbTip(element){
    var el = $(element);

    el.toggleClass("thumbs-up");
    el.toggleClass("thumbs-up-green");
}

Answer 3

这是一个简单JS的解决方案

我建议分两步交换拇指图像：

检查当前显示的图像。
然后更改图像，继续进行操作。

例如：

<script>
    function thumbTip(element){
        if(element.src == '../images/thumbs_up.png'){
            element.src = '../images/thumbs_up_green.png';

            //Further Code: (when thumb gets green) 

        }else{
            element.src = '../images/thumbs_up.png';

            //Further Code: (when thumb gets normal again) 

        }
    }

注意：在这种情况下，img的绝对路径可能会更好。

Javascript交换图片.this点击

3 个答案: