2

单击图像时，我正在尝试执行简单的图像交换。我正在遍历数据库，所以我有一堆“竖起大拇指”的图像。当用户单击其中一个图像时，我希望该特定图像变为绿色。这两个图像名称是“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>
4

3 回答 3

2

正如您已标记 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 属性。

于 2013-08-04T12:49:04.693 回答
1

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

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

    el.toggleClass("thumbs-up");
    el.toggleClass("thumbs-up-green");
}
于 2013-08-04T12:53:10.797 回答
0

这里有一个纯 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 的绝对路径可能会更好。

于 2013-08-04T12:54:28.453 回答