时间戳

首页 > 解决方案 > 如何避免 jQuery 中的函数重复

jquery - 如何避免 jQuery 中的函数重复

问题描述

我对 jQuery 很陌生，目前正在研究www.image.cards，这是一个学习荷兰语的工具。

单击图像以显示荷兰语单词，然后单击音符以播放显示发音的音频文件。

这些音符有自己的 id (id='horse')，而 mp3 文件有自己的名称 (./mp3/horse.mp3)。

这是我的 HTML：

<section>
    <div class="card">
        <div class="front"><img src="/img/horse.png"></div>
        <div class="back">
            <p>Horse</p><b id="horse">♫&lt;/b>
        </div>
    </div>
</section>

我正在使用 jQuery，如下所示：

$("#horse").click(function () { 
    var horse = new Audio("./mp3/horse.mp3"); 
    horse.play(); 
});

我目前正在为每张卡添加一个功能。我不介意，但我觉得有一种更聪明的方法可以做到这一点，因为 button-id 和 mp3 文件具有相同的名称。

也许以某种方式将“id”的名称复制并粘贴到.mp3？

我没有成功尝试以下方法：

var $this = $(this);
    $('.back b[name="'+$this.attr('id')+'"]', .play("./mp3/'$this'.mp3");
});

我究竟做错了什么？有没有更好的办法？

每一天都是上学日！

标签： jquery

解决方案

找到所有这些可点击元素的通用选择器。

显然所有b元素都是div具有 class 的元素的子元素back，您可以这样做：

$(".back>b").click(function(){
    new Audio("./mp3/" + this.id + ".mp3").play();
});

请注意，$(this).attr("id")将评估为与 相同this.id。

推荐阅读