文章/答案/技术大牛

发布

社区首页 >问答首页 >如果单击ID，则jQuery replaceWith

问如果单击ID，则jQuery replaceWith
EN

Stack Overflow用户

提问于 2014-01-31 18:19:01

回答 3查看 102关注 0票数 1

我有一个非常基本的网站，显示从IP摄像机流。所有5个提要都通过一个表显示，该表位于div内部的“#main”提要下面。我希望这样，当单击表中的一个提要时，'#main‘提要将被替换为那个提要，这样它就会显示得更大。

我的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" />');
        }
});

jquery

html

video

回答 3

Stack Overflow用户

发布于 2014-01-31 18:22:51

使用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()

票数 1

Stack Overflow用户

发布于 2014-01-31 18:31:37

现场演示

$(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" />');
  });

});

票数 0

Stack Overflow用户

发布于 2014-01-31 18:33:11

如果将视频源的表设置为相同，则可以使用以下命令：

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

jsFiddle实例

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21487245

复制

相似问题

问如果单击ID，则jQuery replaceWith
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果单击ID，则jQuery replaceWithEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果单击ID，则jQuery replaceWith
EN