打开Javascript交换图像.单击

Javascript Swap Image on .this Click

本文关键字：单击 图像 交换 Javascript 打开      更新时间：2023-09-26

我正试图在单击图像时执行一个简单的图像交换。我正在循环浏览一个数据库，所以我有一堆"竖起大拇指"的图像。当用户点击其中一个图像时，我希望该特定图像变为绿色。两个图像名称是"thumbs_up.png"answers"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>

因为您已经标记了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属性。

在下面的例子中，你会有两个css类，它们的图像分别命名为thumb-up和thumb-up-green，每次你都只是在元素上切换哪一个。

function thumbTip(element){
    var el = $(element);
    el.toggleClass("thumbs-up");
    el.toggleClass("thumbs-up-green");
}

这里有一个纯JS的解决方案

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

  1. 检查当前显示的图像
  2. 然后更改图像并继续执行进一步的代码

例如：

<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的绝对路径可能会更好。

相关文章：