0

我有三个不同的页面；player_lo.html,player_hi.html和player_med.html.

这三个页面是不同质量的流播放器流页面。我想使用 JavaScript 来更改iframe's 的来源。

我有这个脚本，但它不起作用：

<a href="/player/player_lo.html" class="button grey" onclick="$('#player').attr('src', 'player_lo.html'); $(this).parent().find('a').removeClass('red'); $(this).parent().find('a').addClass('grey'); $(this).addClass('red').removeClass('grey'); return false;">Low Quality</a>
<a href="/player/player_med.html" class="button red" onclick="$('#player').attr('src', 'player_med.html'); $(this).parent().find('a').removeClass('red'); $(this).parent().find('a').addClass('grey'); $(this).addClass('red').removeClass('grey'); return false;">medium quality</a>
<a href="/player/player_hi.html" class="button grey" onclick="$('#player').attr('src', 'player_hi.html'); $(this).parent().find('a').removeClass('red'); $(this).parent().find('a').addClass('grey'); $(this).addClass('red').removeClass('grey'); return false;">high quality/a>

有关我正在尝试做的示例，请查看以下内容：http
: //slon.ru/tvrain/ 当您单击Низкое качество - 这是另一个框架，如果是下一个，另一个等等......

4

1 回答 1

0

您在href链接中使用绝对路径（例如"/player/player_lo.html"），但在 JavaScript 中使用相对路径（例如'player_lo.html'）。这可能是你的问题。

  • 尝试在您的 JavaScript 中使用相同的（绝对）路径。
  • 确保页面确实存在。
  • 密切注意浏览器的错误控制台，看看出了什么问题。

您可能会发现有用的其他提示：

不要使用名为red和gray的两个类（它们是互斥的类，意味着一个按钮不能同时是两个类），而是尝试使用一个描述差异的类，例如active。然后，使用 CSS 将按钮的样式设置为默认为灰色，或者当它们具有 class 时为红色active。另一个优点是颜色没有在类名中编码（例如，您可以在将来将活动颜色更改为蓝色或其他颜色）。

此外，不要使用 inlineonclick属性，而是尝试将事件处理程序绑定到JavaScript 本身<a>的标签。这样，您可以轻松地使用现有的，而且您可以重用使单击的按钮处于活动状态所需的代码。<a>href

HTML：

<a href="/player/player_lo.html" class="button">Low Quality</a>
<a href="/player/player_med.html" class="button">medium quality</a>
<a href="/player/player_hi.html" class="button">high quality/a>

JavaScript：

$('.button').click(function(event) {
    var button = $(this);
    $('#player').attr('src', button.attr('href'));
    makeActive(button);
    return false;
});

function makeActive(button) {
    $('.button').removeClass('active');
    button.addClass('active');
}

CSS：

.button {
    color: grey;
}
.button.active {
    color: red;
}

文档：

于 2012-07-23T20:52:52.080 回答