Question

对这个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 ）

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

但是，如果您取消注释提醒（ID），则会看到ID已生成...

有人可以帮忙吗？

欢呼声，担

Answer 1

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

player1.loadAudio(parseInt(id));

是的，并且没有必要使用初始化行。只需使用;

var id = $(this).parent().attr('id').replace(/audioControlButtons-/, '');

Answer 2

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

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

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

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

你可以在这里做至少一些其他的优化 - 事件委托，而不是在+事件中做所有事情 - 但这超出了这个问题的范围。地狱，即使我的实现可能会稍微优化，但同样，这将需要更深入的解释。

在jquery上传递变量

2 个答案: