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 实例都在一个 div 标签内，该标签的 id 为“post-1”、“post-2”等。其中数值是数据库中的 post id。我可以将此数字 id 添加到 bar，所以它会像 bar-1、bar-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元素在 that 中<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>

在您的 click 事件处理程序中，使用以下内容来波动或停止正确的元素：

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 回答