0

私は次のことを理解しようとしています。

次のjQueryコードがあります：

var as = "";
var bPlay = 0;
audiojs.events.ready(function() {
    as = audiojs.createAll();
    $(".audiojs .play-pause").click(function() {
        var e = $(this).parents(".audiojs").index(".audiojs");
        $.each(as, function(t, n) {
            if (t != e && as[t].playing) {
                as[t].pause()
            }
        })
        bPlay = !bPlay;
        if (bPlay == 1) {
            $(".bar").each(function(i) {
                fluctuate($(this));
            });
        } else {
            $(".bar").stop();
        }
    })
});

一言で言えば、誰かがページ上の特定の .audiojs インスタンスをクリックすると、リストが作成されます。1) 再生中の他のインスタンスがあるかどうかを確認し、一時停止している場合。そして、それが再生されている場合は、変動機能をページ上の要素に適用しますclass="bar"。これが問題です！ページ上のすべての .bar に適用するのではなく、特定の .audiojs インスタンス (クリックされて再生されているもの) に関連付けられている特定のグループにのみ適用します。

次の解決策を考えました。各 .audiojs インスタンスは、「post-1」、「post-2」などの ID を持つ div タグ内にあります。数値はデータベースからの投稿 ID です。この数値 ID をバーに追加できるので、バー 1、バー 2 などのようになります...しかし、この後、問題が発生します。

JavaScriptが機能するには、クリックされているaudiojsインスタンスに関連付けられた「post-[id]」から数値を取得し、それを何らかの方法で保存する必要があるため、後でこのように使用できます

bPlay = !bPlay;
    if (bPlay == 1) {
        $(".bar-[value retrieved from post-...]").each(function(i) {
            fluctuate($(this));
        });
    } else {
        $(".bar-[value retrieved from post...]").stop();
    }

誰かがそれを達成する方法を説明してもらえますか?

4

2 に答える 2

2

正直なところ、最も簡単な方法は、次のように、要素のカスタムdata-*属性に貼り付けることです。<div id="post-X">

<div id="post-1" data-bar="bar-1">...</div>

次に、.audiojs要素がその内にあると言っ<div>たのでthis、イベントハンドラー内からその<div>要素に（を使用して.closest()）移動し、その値を取得します。

var barId = $(this).closest('[id^="post-"]').attr('data-bar');

次に、それを使用する必要がある場合:

$("." + barId).each(function(i) {
    fluctuate($(this));
});
于 2013-05-08T15:37:51.087 に答える
1

クラスまたは ID に値を埋め込む代わりに、data-* 属性を使用します。

<div class="audiojs" data-fluctuate-target="bar-1">
  <button type="button" class="play-pause">
    <!-- ... -->
  </button>
</div>

<div class="bar-1">
   <!-- ... -->
</div>

クリック イベント ハンドラーで、次を使用して正しい要素を変動または停止させます。

var fluctuateClass = $(this).closest('.audiojs').attr('data-fluctuate-target');
$('.' + fluctuateClass).each(function () {
  if (bPlay == 1) {
    fluctuate($(this));
  } else {
    $(this).stop();
  }
});
于 2013-05-08T15:35:58.853 に答える