javascript - 选中复选框后，if/else 事件(更改文件路径)不会更改

Question

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

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

实际上，每个节奏都有两个相关的音频文件——一个是直接版本，一个是摇摆版本。

当用户单击“swing it”复选框时，我希望播放 swing 版本。

否则，我想要直接玩版本。 Straight 和 swing 音频文件的名称相同(例如 2.5.mp3)，但 Straight 版本称为 audio/2.5.mp3，而 swing 版本则称为 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 中进行硬编码，直到复选框逻辑正常工作。