Question

我有一个非常基本的网站，可以显示来自IP摄像机的视频流。所有5个Feed都通过一个表格显示，该表格位于div内的“#main”Feed之下。我想要它，以便当点击表格中的某个Feed时，“＃main”Feed将替换为该Feed，因此它会显示得更大。

我的JS文件只是使用前两个凸轮输入进行测试。

如果格式不正确，请道歉，这是我在这里的第一篇文章。

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>DSAC Cattle Feed</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

        </script>
        <script type='text/javascript' src='camjq.js'></script>
    </head>

    <body>
        <div id="main">
            <p>Cam 1</p>
            <img width="640px" height="360px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
        </div>
        <table>
            <tr>
                <td>
                    <p style="text-align:center">Cam 1</p>
                </td>
                <td>
                    <p style="text-align:center">Cam 2</p>
                </td>
                <td>
                    <p style="text-align:center">Cam 3</p>
                </td>
                <td>
                    <p style="text-align:center">Cam 4</p>
                </td>
                <td>
                    <p style="text-align:center">Cam 5</p>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="cam1">
                        <img width="128px" height="72px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
                    </div>
                </td>
                <td>
                    <div id="cam2">
                        <img width="128px" height="72px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
                    </div>
                </td>
                <td>
                    <img id="cam3" width="128px" height="72px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
                </td>
                <td>
                    <img id="cam4" width="128px" height="72px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
                </td>
                <td>
                    <img id="cam5" width="128px" height="72px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
                </td>
            </tr>
        </table>
    </body>

</html>

JS：

$(document).ready(function(){
//cam1
    jQuery('#cam1').click(function(){
        $(this).data('clicked', true);
    });
    if (jQuery('#cam1').data('clicked')) 
        { $("#main").replaceWith('<p> Cam 1 </p><img width="640px" height="360px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />');
        }
//cam2
    $('#cam2').click(function(){
        $(this).data('clicked', true);
    });
    if ($('#cam2').data('clicked')) 
        { $("#main").replaceWith('<p> Cam 2 </p><img width="640px" height="360px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />');
        }
});

Answer 1

而不是replaceWith()使用.html()

$(document).ready(function () {
    //cam1
    $('#cam1').click(function () {
        $("#main").html('<p> Cam 1 </p><img width="640px" height="360px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />');
    });
    //cam2
    $('#cam2').click(function () {
        $("#main").html('<p> Cam 2 </p><img width="640px" height="360px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />');
    });
});

此外，您无需使用.data()

Answer 2

LIVE DEMO

$(function($){

  var videos = [
    "video.cgi",
    "video_bla.cgi",
    "video_something.cgi",
    "video_ola.cgi",
    "video5.cgi"
  ];

  $('[id^=cam]').click(function(){
     var n = this.id.match(/\d/g) - 1; // id number - 1 (0 based videos array);
     $("#main").html('<p> Cam '+ n +' </p><img width="640px" height="360px" src="http://IP/axis-cgi/mjpg/'+ videos[n] +'"alt="real-time video feed" />');
  });

});

Answer 3

如果您将视频源的表格设为相同，则可以使用：

$('td img').click(function () {
    $('#main p').html(this.id);
    $('#main img').prop('src', this.src);
})

<强> jsFiddle example

HTML

<div id="main">
    <p>Cam 1</p>
    <img width="640px" height="360px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
</div>
<table>
    <tr>
        <td>
            <p style="text-align:center">Cam 1</p>
        </td>
        <td>
            <p style="text-align:center">Cam 2</p>
        </td>
        <td>
            <p style="text-align:center">Cam 3</p>
        </td>
        <td>
            <p style="text-align:center">Cam 4</p>
        </td>
        <td>
            <p style="text-align:center">Cam 5</p>
        </td>
    </tr>
    <tr>
        <td>
            <img id="cam1" width="128px" height="72px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
        </td>
        <td>
            <img id="cam2" width="128px" height="72px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
        </td>
        <td>
            <img id="cam3" width="128px" height="72px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
        </td>
        <td>
            <img id="cam4" width="128px" height="72px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
        </td>
        <td>
            <img id="cam5" width="128px" height="72px" src="http://IP/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />
        </td>
    </tr>
</table>

如果点击了ID，jQuery replaceWith

3 个答案: