Question

在我的即兴音乐网站上，我创建了用户可以选择的节奏列表。当他们单击与每个节奏相关联的按钮时，会发生两件事：1）节奏的PNG填充“显示” div，以及2）节奏播放。

我已经找到了允许这种情况发生的代码...但是只有＃1部分（用图像填充显示）才是全局函数。＃2（节奏的演奏）仍然是每个节奏的单独功能。考虑到我总共有100多个节奏，这最终是很多代码。

关于如何将play（）函数转换为全局函数的任何建议？（理想情况下，我什至可以在混音中添加播放/暂停切换，但这是另一个问题。）

非常感谢！

现在，每个节奏都重复执行play（）函数（总计> 100）：

<section class="allRhythms">
   <h6>Tap play to listen. Tap number to select.</h6>
        <div class="RM_rhythm">
            <audio id="2.1" preload='none'>
            <source src='../audio/2.1.mp3' type='audio/mpeg' /><source src='../audio/2.1.ogg' type='audio/ogg' /></audio>
            <button onclick="document.getElementById('2.1').play();"><i class="fas fa-play"></i></button>
            <a href="#" class="button">2-1</a>
            <img src="../images/RM-2.1.png" width="172" height="60" alt="2-1">
        </div>
        <div class="RM_rhythm">
            <audio id="2.2" preload='none'>
            <source src='../audio/2.2.mp3' type='audio/mpeg' /><source src='../audio/2.2.ogg' type='audio/ogg' /></audio>
            <button onclick="document.getElementById('2.2').play()"><i class="fas fa-play"></i></button>
            <a href="#" class="button">2-2</a>
            <img src="../images/RM-2.2.png" width="172" height="60" alt="2-2">
        </div>
        <div class="RM_rhythm">
            <audio id="2.3" preload='none'>
            <source src='../audio/2.3.mp3' type='audio/mpeg' /><source src='../audio/2.3.ogg' type='audio/ogg' /></audio>
            <button onclick="document.getElementById('2.3').play()"><i class="fas fa-play"></i></button>
            <a href="#" class="button">2-3</a>
            <img src="../images/RM-2.3.png" width="172" height="60" alt="2-3">
        </div>
</section>

此全局脚本使用选定节奏的图像填充div：

<!-- fill currentRhythm_A -->   
<script type="text/javascript" language="javascript">

    $(document).ready(function() {
    $('.button').on('click', function() {
        var imagewanted = $(this).closest('.RM_rhythm').find('img').attr("src");
        $('.currentRhythm_A').html("<img src='" + imagewanted + "' />");
        var currentlabel = $(this).closest('.RM_rhythm').find('audio').attr("id");
        $('#currentLabelA').html(currentlabel);
        $('#playA').html("<source src='../audio/" + currentlabel + ".mp3' type='audio/mpeg' /><source src='../audio/" + currentlabel + ".ogg' type='audio/ogg' />");
        $('#playA').load(); 

   });
});
</script>

此div填充了图像：

<div class="currentSelection">
    <div class="selectedLabelA" id="currentLabelA">A</div>
    <div class="selectedRhythm currentRhythm_A" id="currentRhythm_A"><img src="../images/RM-0.1.png" width="172" height="60" alt="0-1" /></div>
    </div>

如何将多个类似的javascript实例转换为一个全局函数？

0 个答案: