每次单击按钮时都会发生两个事件..但第三个事件仅在文档加载时更改

Two events changing every time button is clicked... but third event changes only on document load

本文关键字：事件 三个 文档 加载 按钮 两个 单击      更新时间：2023-09-26

此代码位于文档的底部，但如果删除$(document).ready(function()行，它仍然会停止工作。前两个事件（动态填充".currentRhythm_A"answers"#currentLabelA"）运行良好；每次我点击按钮，它们都会改变。然而，第三个事件——动态填充"#playA"——只有在我第一次单击按钮时才起作用。我怎么把最后一行编码错了？（我是这里的js新手。）非常感谢！

编辑：我应该明确指出，还有100个其他按钮，如"6.1"、"4.2"、"3.4"等，它们对应着不同的节奏#第一次点击按钮时，playA被正确填充——比如说，点击按钮6.1——但是，当我点击按钮4.2时，#playA保持填充有节奏6.1，而不是变为节奏4.2。Divs".currentRhythm_A"answers"currentLabelA"确实会随着按钮的点击而不断变化。只有#playA不会一直更改，而是保持第一次单击的按钮的值。

<div class="RM_rhythm">
    <audio id="6.1" preload='none'>
        <source class="straight" src='audio/6.1.mp3' type='audio/mpeg' /><source src='audio/6.1.ogg' type='audio/ogg' />
        <source class="swing" src='audio/swing/6.1.mp3' type='audio/mpeg' /><source src='audio/swing/6.1.ogg' type='audio/ogg' />
    </audio>
    <button onclick="document.getElementById('6.1').play()">&#x25b6;</button><a href="#" class="button">6-1</a><img src="images/RM-6.1.png" width="172" height="67" alt="6-1"></div>
<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>
$(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' />");
    });
});

好吧，jQuery代码运行得很好，它确实更改了audio元素中的source标记。问题是，当您想要动态更改音频源时，必须对audio元素调用.load()方法。所以你的代码必须是这样的：

$(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(); // note that line over here
    });
});
相关文章：