使用jquery css在单击时更改图像大小

我有一个html表格，其中包含列表中的视频和图像。如果您单击任意一行，它将播放视频或在div中显示图像

我还有一个大小更改链接，可以在单击时调整视频或图像的大小

<div id="player" style="display:block;width:320px;height:240px;background-image:url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)"></div>
<a id="toggleres" href="#">Change to 640x480</a>
<table id="webcam-table" class="pretty">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Date Created</th>
                    <th>Length</th>
                </tr>
                </thead>
                <tbody>
                    <tr class="videorow" data-url=http://www.extremetech.com/wp-content/uploads/2012/12/Audi-A1.jpg>
                        <td>
                            testimages 
                        </td>
                        <td>
                            13 Jun 2013 22:01:37 
                        </td>
                        <td>
                            1sec    
                        </td>
                    </tr>
                                        <tr class="videorow" data-url=http://metalstate.files.wordpress.com/2013/03/10-mclaren-p1-cars-to-wait-for-jpg_235623.jpg>
                        <td>
                            testimages 
                        </td>
                        <td>
                            13 Jun 2013 22:01:37 
                        </td>
                        <td>
                            1sec    
                        </td>
                    </tr>
    </tbody>
</table>

这对于没有任何特殊考虑的视频来说非常有效，因为它在播放器中打开，可以根据div大小进行调整并继续播放。图像是不同的。如果你点击一个图像，然后尝试改变它的大小，它会被重置为原始背景。我意识到这正是代码所做的，但它对于视频来说非常棒

我正在努力想办法让这项工作既适用于视频，也适用于图像。这里有一个说明了该行为（至少对于图像）

请注意#toggleres click事件需要存在。有人应该能够切换背景图像的大小，而无需单击表中的某一行。换句话说，如果没有单击任何图像或视频，则主背景占位符图像需要存在

要总结预期的行为，请执行以下操作：

显示背景图像（320x240）。有人单击更改解决方案链接，它将扩展到（640x480）-目前正在使用下面的代码

如果有人单击表中的一行（可能是视频或图像），它将更改背景图像（无论是320x240还是640x480）-这目前正在使用下面的代码

如果有人单击表中的另一行，则该图像/视频将更改背景图像-这主要起作用，但如果播放视频，则无法使用图像单击另一行，则不会重置/删除播放器

只要屏幕上有图像或视频（单击表格行后），您可以单击更改分辨率以使视频或图像变大/变小-这不起作用，因为它将始终重置为背景图像（小提琴说明了这一点）

---

看起来您只需要删除

，“背景图像”：“url”(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)“

javascript中的一部分（在它出现的两个地方）。这应该可以解决总结中第4点的问题。不过我不确定第3点-我需要查看将播放器添加到页面的代码，以确定如何删除它。

可以进一步解释预期的行为吗？@Grampa添加了预期行为的摘要。希望有帮助…我添加了视频播放器代码。困难在于它使用的是保持打开状态的flowplayer。我需要以某种方式重置这个播放器。。。

    jQuery('#toggleres').click(function(event) { 
        if (jQuery('#toggleres').text() == "Change to 320x240"){
            jQuery(this).html("Change to 640x480");
            jQuery('#player').css({'width':'320px', 'height':'240px', 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)'});
        }
        else{
            jQuery(this).html("Change to 320x240");
            jQuery('#player').css({'width':'640px', 'height':'480px', 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)'});

        }
    });

jQuery("#webcam-table").on("click", "tr.videorow > td", function(e) {
        var parser = document.createElement('a');
        parser.href = theUrl;
            //the right host, therefore it is an image
        if (parser.hostname == "myhost.com")
        {
            jQuery("#player").css("background", "url('" + theUrl + "')");
        }
        else
        {
            flowplayer("player", "js/flowplayer/flowplayer-3.2.12.swf", {
                clip: {
                    url: theUrl,
                    provider: 'rtmp'
                },
                plugins: {
                    rtmp: {
                        url: "js/flowplayer/flowplayer.rtmp-3.2.10.swf",
                        netConnectionUrl: 'rtmp://'+window.location.host+'/recordings'
                    }
                }
            });
        }
});