从id为'post-1‘的父代获取数值，并在jQuery函数中使用它

Question

我正在尝试弄清楚以下几点。

我有以下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”等。其中数字值是来自数据库的帖子id。我可以把这个数字id加到bar上，所以它就像bar-1，bar-2等等。然而，在这之后，我遇到了一些问题。

为了让javascript工作，我需要从"post-id“中检索与被点击的audiojs is实例相关联的数值，然后以某种方式存储它，这样我以后就可以像这样使用它了。

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

有人能给我解释一下怎样才能实现吗？

Answer 1

老实说，最简单的方法是将其放在<div id="post-X">元素的自定义data-*属性中，如下所示：

<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));
});

Answer 2

使用data-* attribute而不是将值嵌入到类或ID中

<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();
  }
});