0

只是对这个 jQuery 的东西有一些问题。

我想做的是：

我有一些看起来像这样的音频控制按钮：

<p><a href='#' onClick="player1.loadAudio(1); return false;">Play audio</a></p>

但是页面上太多了，所以我正在尝试优化代码并制作一个小函数来检查按钮上的 div id 并添加告诉播放器要播放的曲目。

所以我这样做了：

 <div id="audioControlButtons-1">
     <div class="speaker">&nbsp;</div>
     <div class="play">&nbsp;</div>
     <div class="pause">&nbsp;</div>
 </div>

<script>
    $(document).ready(function() {
        $("[id^=audioControlButtons-] div.play").click(function() { 
          var id =    new Number;
          id = $(this).parent().attr('id').replace(/audioControlButtons-/, ''); 
          //alert(id);
          player1.loadAudio(id);
          return false;
        });
      });

</script>

我的问题是：

id 没有传递给 player1.loadAudio( id )

如果我硬编码 player1.loadAudio( 1 )

有用！但是当我尝试将变量传递给函数时它不起作用......

但是，如果您取消注释alert(id)事物，您将看到 id 正在生成...

有人可以帮忙吗？

干杯，丹

4

2 回答 2

0

我实际上对您的示例感到困惑，因为您最初有这个：

<p><a href='#' onClick="player1.loadAudio(1); return false;">Play audio</a></p>

但随后您不再引用它。你的意思是这个html：

<div id="audioControlButtons-1">
    <div class="speaker">&nbsp;</div>
    <div class="play">&nbsp;</div>
    <div class="pause">&nbsp;</div>
</div>

是你真正创造的吗？如果是这样，那么您可以像这样重写它：

<div class="audio-player">
    <div class="speaker">&nbsp;</div>
    <div class="play" data-track="1">&nbsp;</div>
    <div class="pause">&nbsp;</div>
</div>

然后在您的脚本块中：

<script>
    $(document).ready(function() {
        $(".audio-player > .play").click(function() { 
            var track = $(this).data('track');
            player1.loadAudio(+track);
            return false;
        });
    });
</script>

所以这里发生了一些事情。

  1. 我只是给了你一个包含div类 ( .audio-player) 以便它更通用且解析更快。你不想做这样的事情，[id^=audioControlButtons-]因为 javascript 遍历和解析 DOM 的速度要慢得多。如果你要在页面上有多个相同的元素，类比 ID 更适合。
  2. 我将您想要的曲目编号play作为data属性 ( data-track) 添加到按钮。使用data属性允许您将任意数据存储在您感兴趣的 DOM 元素上（即.play此处的按钮）。那么这样一来，您就不需要使用replace仅获取轨道号的方法来进行这种奇怪的 DOM 遍历了。这节省了减少不必要的 JS 处理和 DOM 遍历。
  3. 考虑到这一点，我在当前 DOM 元素上使用jQuery'方法作为参数。这将获得属性值。 .data()"track"data-track
  4. 使用新的曲目编号，我将其传递到您的player1.loadAudio方法中，并+在前面加上一个标志。这是一个 javascript 小技巧，如果方法需要，它允许您将值转换为实际数字。

您至少可以在此处进行其他一些优化——事件委托，而不是在ready事件中做所有事情——但这超出了这个问题的范围。地狱，即使是我的实现也可以稍微优化一下，但同样，这需要更深入的解释。

于 2013-11-13T06:22:34.970 回答
0

我想我看到了你的问题。变量 id 是一个字符串。尝试;

player1.loadAudio(parseInt(id));

是的，初始化行不是必需的。只需使用；

var id = $(this).parent().attr('id').replace(/audioControlButtons-/, '');
于 2013-11-13T05:55:00.960 回答