有没有更好的方法在 Javascript 和 JQuery 中写这个？

Question

<div class="video">
  <span class="videoNewIcon"><img src="somenewicon.gif"  width="26" height="11" /></span>        
  <a class="videoThumb" href="somevideoname.aspx">
    <img src="http://somesite.com/someimagename.jpg"  alt="description" longdesc="rtmp://somertmp.com/someapplication/mp4:somevide.f4v"/>
  </a>
  <span class="videoTitle">some title</span>
  <span class="videoInfo videoInfoViews"><strong>some views</strong></span>
  <span class="videoInfo videoInfoUpTime"><strong>some up time </strong></span>
  <span class="videoInfo videoInfoCategory"><strong><a href="some category.aspx">some category</a></strong></span>
  <span class="videoInfo videoInfoDuration"><strong>some duration</strong></span>
</div>

$(document).ready(function () {
  $(".video").hover(
    function () {
      $(this).oneTime(1000, "hide", function () {
        $(".videoThumb").children("img").show();
        $("object").remove();
        $(this).children(".videoThumb").children("img").hide();
        var href = $(this).children(".videoThumb").attr("href");
        var longdesc = $(this).children(".videoThumb").children("img").attr("longdesc");
        $("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' width='180' height='135' id='videoHolder' align='middle'><param name='movie' value='videoHolder.swf?vid=" + longdesc + "&url=" + href + "' /><param name='quality' value='high' /><param name='bgcolor' value='#000000' /><param name='play' value='true' /><param name='loop' value='true' /><param name='wmode' value='window' /><param name='scale' value='showall' /><param name='menu' value='true' /><param name='devicefont' value='false' /><param name='salign' value='' /><param name='allowScriptAccess' value='sameDomain' /><!--[if !IE]>--><object type='application/x-shockwave-flash' data='videoHolder.swf?vid=" + longdesc + "&url=" + href + "' width='180' height='135'><param name='movie' value='videoHolder.swf' /><param name='quality' value='high' /><param name='bgcolor' value='#000000' /><param name='play' value='true' /><param name='loop' value='true' /><param name='wmode' value='window' /><param name='scale' value='showall' /><param name='menu' value='true' /><param name='devicefont' value='false' /><param name='salign' value='' /><param name='allowScriptAccess' value='sameDomain' /><!--<![endif]--><a href='http://www.adobe.com/go/getflash'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a><!--[if !IE]>--></object><!--<![endif]--></object>").appendTo($(this).children(".videoThumb"));
      });
    },
    function () {
      $(this).stopTime("hide");
      $("object").remove();
      $(this).children(".videoThumb").children("img").show();
    }
  );
});

基本上我所拥有的是一个<div class="video"> ，我将其中的<a class="videoThumb">替换为带有电影预览的 flash 播放器的图像。 我插入了一个 jQuery 计时器来创建延迟，因此一旦我在 div.video 上的div.video的第一个将在第二个开始之前停止播放。

Answer 1

在这种情况下，我会使用jquery 模板。

在这里查看我的答案如何添加一个大的 DIV？ 示例用法。