Как я могу преобразовать несколько одинаковых экземпляров JavaScript в одну глобальную функцию? - PullRequest
Новая
       51

Как я могу преобразовать несколько одинаковых экземпляров JavaScript в одну глобальную функцию?

0 голосов
/ 19 мая 2019

На моем музыкальном веб-сайте по импровизации я создал список ритмов, из которых пользователь может выбирать. Когда они нажимают кнопку, связанную с каждым ритмом, происходят две вещи: 1) PNG ритма заполняет div «display» и 2) ритм воспроизводится.

Я выяснил код, который позволяет этому случиться ... но только часть № 1 (заполнение дисплея изображением) является глобальной функцией. № 2 (игра ритма) - все еще индивидуальная функция для каждого ритма. Учитывая, что у меня в общей сложности более 100 ритмов, получается много кода.

Любые предложения о том, как я могу преобразовать функцию play () в глобальную функцию? (В идеале, я бы даже смог добавить к миксу переключатель play / pause, но это другой вопрос.)

Большое спасибо!

В данный момент функция 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>
...