0

我有一个图像列表，当单击图像时，我需要进行 ajax URL 调用并验证一些参数。

如果验证没问题，我将不得不显示fancybox，否则我应该显示另一个fancybox。

我的问题： 当我单击图像并且如果验证为假时，另一个 fanybox 会按预期显示。但是如果验证是真的，Firebug 会抛出一个错误，说“递归过多”。

PS::如果验证为真，则期望显示 video.js 播放器。

HTML 示例：

<a id="videolink" href="#1" title="Test">
  <img class="vidimg" src="1.png" videoId="1" width="180" height="180" />
</a>

<div style="display:none">
      <video id="1" poster="1.png" class="video-js vjs-default-skin">
        <source src="1362993728.mp4" type='video/mp4'>
        <source src="1362993728.webm" type='video/webm'>    
        <source src="1362993728.ogv" type='video/ogg'>                 
    </video>
</div>

jQuery：

$("a#videolink").click(function(){  
   $videoId = $(this).children("img.vidimg").attr("videoId"); 
   $isValid = "true" or "false" ;       // validation using .ajax() call

   if($isValid == 'true'){
      $(this).fancybox().click();
   }else{
      $("#myModal").fancybox().click()
   }                                             
});

Firebug在行上显示了“太多递归”：

$videoId = $(this).children("img.vidimg").attr("videoId");

在“false”的情况下要显示的其他 fanybox 内容：

 <div style="display:none">
    <div id="myModal"> Invalid Item</div>
 </div>
4

1 回答 1

0

以下更改帮助我按预期完成了这项工作..（在播放 fancybox 视频时仍然存在一些问题）。

HTML 示例： 

<div style="display:none">
  <div id="1">
      <video poster="1.png" class="video-js vjs-default-skin">
        <source src="1362993728.mp4" type='video/mp4'>
        <source src="1362993728.webm" type='video/webm'>    
        <source src="1362993728.ogv" type='video/ogg'>                 
    </video>
  </div>
</div>

jQuery：

$("img.vidimg").click(function(){  
   $videoId = $(this).attr("videoId"); 
   $isValid = "true" or "false" ;       // validation using .ajax() call

   if($isValid == 'true'){
      $('#' + $videoId ).fancybox().click();
   }else{
      $("#myModal").fancybox().click()
   }                                             
});

对此代码有任何与性能或不良代码实践相关的评论吗？

我将在这里为视频播放器问题创建一个新问题。此更改后，视频无法播放。:(

于 2013-03-12T06:07:22.833 回答