0

私は3つの異なるページを持っています。player_lo.html、player_hi.htmlおよびplayer_med.html。

これらの3つのページは、異なる品質のフロープレーヤーストリームページです。iframeJavaScriptを使用してのソースを変更したい。

私はこのスクリプトを持っていますが、機能しません：

<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と呼ばれる 2 つのクラス(相互に排他的なクラスであり、ボタンが同時に両方になることはできないことを意味します) の代わりに、違いを説明する単一のクラス (たとえばactive ) を使用してみてください。次に、CSS を使用して、ボタンのスタイルをデフォルトで灰色にするか、クラスがある場合は赤にしますactive。追加の利点は、色がクラス名にエンコードされていないことです (たとえば、アクティブな色を将来的に青などに変更できます)。

また、インライン属性を使用する代わりに、イベント ハンドラーをJavaScript 自体のタグonclickにバインドしてみてください。そうすれば、既存のを簡単に使用できるだけでなく、クリックしたボタンをアクティブにするために必要なコードを再利用できます。<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 に答える