0

jQuery でトリガーされるプレーヤーがあります。1 つのページに複数のプレーヤーがある場合がありますが、ツールバーには 1 つの「miniPlayer」しかありません。別のプレーヤー イベントがトリガーされた場合、プレーヤー ツールバーは再生/一時停止などを行う必要があります。これを実現するには、プレーヤー要素内のクラスを置き換えるだけです。

ツールバーのプレーヤーには #miniPlayer の ID があり、他のすべてのプレーヤーは単に #player になります。これはスタイル用です。このため、プレーヤーのボタンがクリックされた場合、またはその逆の場合に miniPlayer のスタイルが変更されないように、要素内のクラスのみを置き換えることができます。

ミニプレーヤー (再生);

<a id="miniControls" class="play" href="" title=""></a>

となります;

<a id="miniControls" class="pause" href="" title=""></a>

miniPlayer の一時停止ボタンまたは通常のプレーヤーの一時停止ボタンのいずれかのオンクリック。

通常のプレーヤー (再生);

<a id="controls" class="play" href="" title=""></a>

となります;

<a id="controls" class="pause" href="" title=""></a>

miniPlayer の一時停止ボタンまたは通常のプレーヤーの一時停止ボタンのいずれかのオンクリック。

私が現在持っているjQueryは、通常のプレーヤー（再生）をクリックするとミニプレーヤーを置き換えます。

<a id="controls" class="pause" href="" title=""></a>

ただし、id はスタイルの miniControls のままにしておく必要があります。miniPlayer をクリックすると、これは逆になりますが同じ問題になります。

jquery スクリプトの再生/一時停止機能 (現時点では miniPlayer でのみ機能します):

play.live('click', function(e) {
    e.preventDefault();
    song.play();

    $('.play').replaceWith('<a id="miniControls" class="pause" href="" title=""></a>');

    $('.seek').attr('max',song.duration);
});

pause.live('click', function(e) {
    e.preventDefault();
    song.pause();
    $('.pause').replaceWith('<a id="miniControls" class="play" href="" title=""></a>');

});

<a>クラスのみを置き換える方法があるので、タグ全体ではなく $('.pause') を $('.play') に置き換えるだけです。jquery の Web サイトを調べましたが、何も見つかりませんでした。多分私はそれを間違った角度で見ています。

4

2 に答える 2

0

jQueryの.toggleClass（）関数を確認してください。

http://api.jquery.com/toggleClass/

于 2012-08-01T19:49:27.493 に答える
0 
$('#miniControls').click(function(e){
    e.preventDefault();
    $(this).hasClass('play') ? song.pause():song.play();
    $(this).toggleClass('play pause');
});

上記の例のようなものを使用すると、コードを大幅に削減できます。この場合、 を使用.toggleClass()して再生クラスと一時停止クラスを切り替え、また を使用.hasClass()して実行するアクションを決定します。

于 2012-08-01T19:52:11.003 に答える