Question

如果你看一下this page here，你会看到我有一个Youtube画廊设置，大部分工作。单击缩略图时，它会切换视频，但不会正确切换右侧的文本。它似乎是在视频背后加载文字，在某些情况下需要两次点击才能切换右边的文字。

查看下面的jQuery，有人可以帮我确定问题吗？

谢谢！

<script>
function replaceVideo(id) {
  originalSrc = jQuery("iframe", "#" + id).attr("src");
  autoPlay = originalSrc + "&autoplay=1";
  jQuery("iframe", "#" + id).attr("src", autoPlay);
  video = jQuery(".video-content", "#" + id).html();
  text = jQuery(".video-description").html();
  jQuery(".vid_desc").html(text);
  jQuery(".flex-video").html(video);
  jQuery("iframe", "#" + id).attr("src", originalSrc);
}

jQuery(".video-list li").click(function() {
  id = jQuery(this).attr("id");
  replaceVideo(id);
});

jQuery(window).load(function() {
  if(window.location.search.substring(1)) {
        element = window.location.search.substring(1).split('&');
        if (document.getElementById(element[0])) {
            document.onload = replaceVideo(element[0]);
        }
    }
});
</script>

Answer 1

在document.ready处理程序中包装代码。

$(function(){
jQuery(".video-list li").click(function() {
  id = jQuery(this).attr("id");
  replaceVideo(id);
});
});

Answer 2

我认为问题在于您如何选择要显示的文字。

这一行

text = jQuery(".video-description").html();

正在使用“视频描述”类抓取每个元素。您可能只想从已点击的项目中获取视频说明。如下所示：

text = jQuery("#" + id + " .video-description").html();

Answer 3

我能够使用以下代码修复它。： - ）

<script>
function replaceVideo(id) {
  originalSrc = jQuery("iframe", "#" + id).attr("src");
  autoPlay = originalSrc + "&autoplay=1";
  jQuery("iframe", "#" + id).attr("src", autoPlay);
  video = jQuery(".video-wrap", "#" + id).html();
  jQuery(".flex-video").html(video);
  text = jQuery(".video-description", "#" + id).html();
  jQuery(".vid_desc").html(text);
  jQuery("iframe", "#" + id).attr("src", originalSrc);
}

jQuery(".video-list li").click(function() {
  id = jQuery(this).attr("id");
  replaceVideo(id);
});

jQuery(window).load(function() {
  if(window.location.search.substring(1)) {
        element = window.location.search.substring(1).split('&');
        if (document.getElementById(element[0])) {
            document.onload = replaceVideo(element[0]);
        }
    }
});
</script>

JQuery - 单击时切换文本无法正常工作

3 个答案: