Question

在我的网站上，用户从100个不同的选项中选择2个节奏（每个选项都有唯一的ID。在上图中，如您所见，用户选择了节奏2.5和节奏5.8。

有一个与每个节奏相关的音频文件，可以通过单击播放按钮来播放。

实际上，每个节奏都有两个音频文件 - 直片和摇摆版。

当用户点击＆＃34;摆动它＆＃34;复选框，我想要摆动版本。

否则，我想要直播版。直音和摇摆音频文件的名称相同（例如2.5.mp3），但直行版本在audio/2.5.mp3调用，而摇摆版本在audio/swing/2.5.mp3调用。

我看过很多SO帖子，但我的代码没有用。这是我的HTML：

<div class="playRow">               
    <div class="rhythms_AandB">
        <div class="currentSelection">
            <div class="playFeatured"><audio id="playA" preload='none'></audio>
                <button class="featuredAudio" onclick="document.getElementById('playA').play()">&#x25b6;</button></div> 
            <div class="selectedLabelA" id="currentLabelA">A</div>
            <div class="selectedRhythm currentRhythm_A" id="currentRhythm_A"></div>
        </div>

        <div class="currentSelection">
            <div class="playFeatured"><audio id="playB" preload='none'></audio>
                <button class="featuredAudio" onclick="document.getElementById('playB').play()">&#x25b6;</button></div> 
            <div class="selectedLabelB" id="currentLabelB">B</div>
            <div class="selectedRhythm currentRhythm_B" id="currentRhythm_B"></div>
        </div>
</div>  
<div class="swingRow">
        <input type="checkbox" name="swingBox" id="swingBox" class="css-checkbox" /><label for="swingBox" class="css-label">Swing it <a href="" id="swing-tooltip" data-tipped-options="position: 'bottom'">(?)</a></label>
        </div>  
</div>

这是我的js：

$(document).ready(function() {  
var activeRhythmA = document.getElementById('currentLabelA');
var activeRhythmB = document.getElementById('currentLabelB');
function swingIt() {
    if(document.getElementById('swingBox').checked) {
    $('#playA').html("<source src='audio/swing/" + activeRhythmA + ".mp3' type='audio/mpeg' /><source src='audio/swing/" + activeRhythmA + ".ogg' type='audio/ogg' />"); $('#playA').load();
    $('#playB').html("<source src='audio/swing/" + activeRhythmB + ".mp3' type='audio/mpeg' /><source src='audio/swing/" + activeRhythmB + ".ogg' type='audio/ogg' />"); $('#playB').load();
    }
    else {
    $('#playA').html("<source src='audio/" + activeRhythmA + ".mp3' type='audio/mpeg' /><source src='audio/" + activeRhythmA + ".ogg' type='audio/ogg' />"); $('#playA').load();
    $('#playB').html("<source src='audio/" + activeRhythmB + ".mp3' type='audio/mpeg' /><source src='audio/" + activeRhythmB + ".ogg' type='audio/ogg' />"); $('#playB').load();    
    }
};
});

Answer 1

你永远不会调用swingIt（）函数。只要选中“Swing It”框，就需要调用它。尝试：

$(document).ready(function() {  
var activeRhythmA = document.getElementById('currentLabelA');
var activeRhythmB = document.getElementById('currentLabelB');
function swingIt() {
    if(document.getElementById('swingBox').checked) {
    $('#playA').html("<source src='audio/swing/" + activeRhythmA + ".mp3' type='audio/mpeg' /><source src='audio/swing/" + activeRhythmA + ".ogg' type='audio/ogg' />"); $('#playA').load();
    $('#playB').html("<source src='audio/swing/" + activeRhythmB + ".mp3' type='audio/mpeg' /><source src='audio/swing/" + activeRhythmB + ".ogg' type='audio/ogg' />"); $('#playB').load();
    }
    else {
    $('#playA').html("<source src='audio/" + activeRhythmA + ".mp3' type='audio/mpeg' /><source src='audio/" + activeRhythmA + ".ogg' type='audio/ogg' />"); $('#playA').load();
    $('#playB').html("<source src='audio/" + activeRhythmB + ".mp3' type='audio/mpeg' /><source src='audio/" + activeRhythmB + ".ogg' type='audio/ogg' />"); $('#playB').load();    
    }
};

$('#swingBox').change(swingIt);
  
});

请注意，正如rdubya指出的那样，你的activeRhythmA和activeRhythmB变量没有做你想做的事 - 它当前是一个DOM元素，但你把它当作一个字符串。在您使用复选框逻辑之前，请考虑使用其中一个URL进行硬编码。

Answer 2

看起来你只是在加载页面时检查复选框。您需要为复选框应用单击处理程序。您似乎也错误地选择了文件的名称，但我可能会误解它应该如何工作。以下是基于您提供的内容的尝试：

$(document).ready(function () {  // Side note, this can be simplified to $(function () {
    $('#swingBox').click(function() {
        var swingPath = this.checked ? 'swing/' : '';
        $.each(['A', 'B'], function(i, label) {
            var activeRhythm = $('#currentLabel' + label).text();
            $('#play' + label)
                .html('<source src="audio/' + swingPath + activeRhythm + '.mp3" type="audio/mpeg" /><source src="audio/' + swingPath + activeRhythm + '.ogg" type="audio/ogg" />')
                .load();
        });
    });
});

如果选中复选框后，/ else事件（更改文件路径）不会更改

2 个答案: