如何在jquery中插入无序列表？

Posted 2023-05-09

【中文标题】如何在jquery中插入无序列表？

【英文标题】：How to insert an undered list into jquery?

【发布时间】：2016-08-16 17:50:47

【问题描述】：

我正在开发一个网站，该网站使用 jquery 脚本在台式机主页上显示视频，并在手机上显示图像。我正在尝试用滑块替换手机的单个图像，而不是拥有更多图像。滑块标记采用 ul 列表形式。您可以在下面第 #9 行的 jquery 脚本的 sn-p 中看到手机的图像 (header_video_image.jpg)

<script type="text/javascript">
    jQuery(document).ready(function()
        var BV = new $.BigVideo(
                            container:$('#top-images'),
                            controls:false
                        );
        BV.init();
if (Modernizr.touch) 
BV.show(" 'header_video_image.jpg' | asset_url ");
 else 
        BV.show([
             type: "video/mp4",  src: "/assets/home-video.mp4" ,
             type: "video/webm", src: "/assets/home-video.webm" ,
             type: "video/ogg",  src: "/assets/home-video.ogv" 
        ],doLoop:true);

    );
</script>

我想将header_video_image.jpg替换为以下ul列表：

<ul class="rslides" id="slider1">
  <li><img src="img/qz3b0o.jpg" ></li>
  <li><img src="img/2e54mc0.jpg" ></li>
  <li><img src="img/qz3b0o.jpg" ></li>
</ul>

有可能吗？

【参考方案1】：

试试这样的：

<script type="text/javascript">
jQuery(document).ready(function()
    var BV = new $.BigVideo(
                        container:$('#top-images'),
                        controls:false
                    );
    BV.init();
    if (Modernizr.touch) 

        // BV.show(" 'header_video_image.jpg' | asset_url ");

        var mobileSlider = '<ul class="rslides hide" id="slider1">';
        mobileSlider += '<li><img src="img/qz3b0o.jpg" ></li>';
        mobileSlider += '<li><img src="img/2e54mc0.jpg" ></li>';
        mobileSlider += '<li><img src="img/qz3b0o.jpg" ></li>';
        mobileSlider += '</ul>';

        BV.show( 100, function() $( this ).html( mobileSlider ););

     else 
            BV.show([
                 type: "video/mp4",  src: "/assets/home-video.mp4" ,
                 type: "video/webm", src: "/assets/home-video.webm" ,
                 type: "video/ogg",  src: "/assets/home-video.ogv" 
            ],doLoop:true);
    
);

【讨论】：

打败我！我做了一个类似答案的 jsbin：jsbin.com/yamejo/edit?js,output

嗨皮特，它根本不起作用。图片应该显示在手机上，但当我用您的代码替换它以插入滑块时，不再有图片或滑块。见这里：wap9.info/6328

Pat Diola 的解决方案也没有做任何事情，我无法看到带有他在 jsbin 中使用的 John Wayne 图像的滑块