Javascript 在jquery上传递变量

只是在jQuery方面有一些问题

我想做的是：

我有一些音频控制按钮，如下所示：

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

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

但是页面上的内容太多了，所以我试图优化代码，并制作一个小功能，检查按钮上的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>

$（文档）.ready（函数（）{
$（“[id^=audioControlButtons-]div.play”）。单击（函数（）{
var id=新编号；
id=$（this.parent（）.attr（'id'）.replace（/audioControlButtons-/，''）；
//警报（id）；
播放器1.加载音频（id）；
返回false；
});
});

我的问题是：

id未传递给播放机1。加载音频（id）

如果我硬编码播放器1.loadAudio（1）

它起作用了！但当我试图将变量传递给函数时，它就不起作用了

但是，如果您取消对警报（id）的注释，您将看到id正在生成

有人能帮忙吗

干杯，

---

丹，我想我明白你的问题了。变量id是一个字符串。尝试

player1.loadAudio(parseInt(id));

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

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

---

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

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

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

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

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

$（文档）.ready（函数（）{
$（“.audio player>.play”）。单击（函数（）{
var track=$（this.data（'track'）；
播放器1.加载音频（+曲目）；
返回false；
});
});

所以这里发生了一些事情

我刚刚给了你的containing

div

一个类（

.audioplayer

），这样它更通用，解析速度更快。您不想做像

[id^=audioControlButtons-]

这样的事情，因为javascript这样遍历和解析DOM要慢得多。如果在页面上有多个相同的元素，那么一个类比ID更适合这样做

我在

播放

按钮中添加了您想要的曲目编号，作为

数据

属性（

数据曲目

）。使用

data

属性可以在感兴趣的DOM元素上存储任意数据（即

.play

按钮）。这样，您就不需要使用

replace

方法来进行这种奇怪的DOM遍历，只需获取曲目编号即可。这样可以减少不必要的JS处理和DOM遍历

现在记住这一点，我在当前DOM元素上使用

jQuery

的

.data（）

方法，并将

的“track”

作为参数。然后将获得

数据轨迹

属性值

使用新的曲目编号，我将其传递到您的

player1.loadAudio

方法，前面有一个

+

标志。这是一个小小的javascript技巧，允许您将值转换为实际数字（如果该方法需要的话）

---

这里至少可以做一些其他优化—事件委派，而不是在

ready

事件中做所有事情—但这超出了本问题的范围。见鬼，即使是我的实现也可以稍微优化一点，但这需要更深入的解释

别担心！请把答案记下来！你确定它没有得到什么吗？在player1.loadAudio中输入一个警报（id），然后查看是否没有收到任何信息。