Question

我有一个视频库，使用Vimeo，我在其下方有一个主要播放器，标题，日期，描述，底部有其他视频的缩略图列表。我让它在你点击缩略图的地方工作，它会更新主播放器中的网址。唯一剩下的就是更新标题，日期和描述。这是我到目前为止所拥有的。

热门视频，标题，日期和说明html：

<iframe src="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933" id="video-iframe" width="700" height="394" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<h2 id="wkTitle">{video_title}</h2>
<p id="wkDate" class="date">Date: {series_weeks:seriesWkDate format="%m/%d/%Y"}</p>
<p id="wkDescription">{video_description}</p>

缩略图部分：

<a href="#" title="{video_title} - {series_weeks:seriesWkDate format="%m/%d/%Y"}" class="videoThumbnail video-thumbnail" rel="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933">
<img src="{video_thumbnail}" alt="{video_title} - {series_weeks:seriesWkDate format="%m/%d/%Y"}" class="img-responsive" />
<span class="playButton"></span>
</a>

jQuery：

$(function() {
$('.video-thumbnail').click(function(e) {
    $('#video-iframe').get(0).src = this.getAttribute('rel');;
});

}）;

有人可以帮我一把吗？以下是参考页面：http://discoverycolorado.dreamhosters.com/series/get-off-your-donkey

当您点击缩略图时，您会看到视频会发生变化，但我还需要它来更改标题和说明。

由于

Answer 1

您的HTML目前看起来像这样：

<a href="#" title="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="videoThumbnail video-thumbnail" rel="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933">
    <img src="{video_thumbnail}" alt="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="img-responsive" /><span class="playButton"></span>
</a>

但是，由于您似乎已经对a元素中的每个视频的某些参数进行了硬编码，因此您可以添加data属性来保存标题，日期和描述。视频：

<a data-title="{video_title}" data-date="{series_weeks:seriesWkDate format=" %m/%d/%Y "}" data-description="{video_description}" href="#" title="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="videoThumbnail video-thumbnail" rel="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933">
    <img src="{video_thumbnail}" alt="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="img-responsive" /><span class="playButton"></span>
</a>

基本上，您使用data-title，data-date和data-description来保存与元素内联的各自数据（我不会这样做，但是因为您已经有了很多你的数据内联，为什么不。）

如果您选择data路径，则可以在点击缩略图后填写字段来填充字段：

$(".video-thumbnail").click(function(){
    $("#video-iframe").attr("src", $(this).attr("rel"));
    $("#wkTitle").text($(this).data("title"));
    $("#wkDate").text("Date - " + $(this).data("date"));
    $("#wkDescription").text($(this).data("description")); 
});

最终，这种方法归结为填充缩略图元素的data字段，然后将相应HTML元素的文本设置为内联数据。

我建议您清理HTML，尤其是截至目前，由于title内的"，"属性存在语法错误。您也可以不使用data属性并依赖缩略图元素的title属性，但是您必须解析字符串，将其拆分为-，然后离开你的实施可以解决各种问题。

此外，根据您以编程方式将{}信息插入各种属性的方式，此方法可能无效。

Vimeo画廊与Jquery - 几乎在那里

1 个答案: