jquery -如何使用多个按钮填充多个div(帮助我简化)

Question

我正在尝试在同一页上填充多个div。一半的div有class="currentRhythmA"，一半的div有class="currentRhythmB“。这些div将由用户从100个独特的一节节律中选择，每个节律显示为图像，并带有相应的音频文件和文本标签。每个节奏都有一个id，可能类似于"RM-1.1“或"RM-6.12”。通过点击节奏的标签(在节奏A部分中具有类"button“，在节奏B部分中具有"buttonB”类)，用户可以为节奏A选择一个节奏，并为节奏B选择一个节奏。

我有两个问题:问题1.我已经成功地用相同的节奏填充了多个div，但我使用了I而不是classes，这似乎效率很低。如何将此代码转换为使用"currentRhythmA“类填充div，而不是使用长长的ids列表？我尝试将#currentRhythmA、#AAAA-1等替换为.currentRhythmA (同样，所有这些it都共享一个类currentRhythmA)，但不起作用。

$( function() {
    $( '.button' ).click(function() {   
        var postData = '';  
        $.ajax( {
            url : 'js/ajax_file_A.php',
            type : 'post',
            data : postData,                
            success : function( resp ) {
                $('#currentRhythmA').html($('#measureA' , resp).html());
                $('#AAAA-1').html($('#measureA' , resp).html());
                $('#AAAA-2').html($('#measureA' , resp).html());
                $('#AAAA-3').html($('#measureA' , resp).html());
                $('#AAAA-4').html($('#measureA' , resp).html());
                $('#AAAB-1').html($('#measureA' , resp).html());
                $('#AAAB-2').html($('#measureA' , resp).html());
                $('#AAAB-3').html($('#measureA' , resp).html());
                $('#AABA-1').html($('#measureA' , resp).html());
                $('#AABA-2').html($('#measureA' , resp).html());
                $('#AABA-4').html($('#measureA' , resp).html());
                $('#AABB-1').html($('#measureA' , resp).html());
                $('#AABB-2').html($('#measureA' , resp).html());
                $('#ABAA-1').html($('#measureA' , resp).html());
                $('#ABAA-3').html($('#measureA' , resp).html());
                $('#ABAA-4').html($('#measureA' , resp).html());
                $('#ABAB-1').html($('#measureA' , resp).html());
                $('#ABAB-3').html($('#measureA' , resp).html());
                $('#ABBA-1').html($('#measureA' , resp).html());
                $('#ABBA-4').html($('#measureA' , resp).html());
                $('#ABBB-1').html($('#measureA' , resp).html());
                $('#BAAA-2').html($('#measureA' , resp).html());
                $('#BAAA-3').html($('#measureA' , resp).html());
                $('#BAAA-4').html($('#measureA' , resp).html());
                $('#BAAB-2').html($('#measureA' , resp).html());
                $('#BAAB-3').html($('#measureA' , resp).html());
                $('#BABA-2').html($('#measureA' , resp).html());
                $('#BABA-4').html($('#measureA' , resp).html());
                $('#BABB-2').html($('#measureA' , resp).html());
                $('#BBAA-3').html($('#measureA' , resp).html());
                $('#BBAA-4').html($('#measureA' , resp).html());
                $('#BBAB-3').html($('#measureA' , resp).html());
                $('#BBBA-4').html($('#measureA' , resp).html());

            }
        });
           return false;
    });
});

Ajax_file_A.php的内容：

    <div> <!-- Container div -->

            <div id="measureA">
            <img src="images/RM-3.2.png">
            </div>

    </div>

问题2.从AJAX文件的内容中可以看到，我已经知道如何设置一个按钮(对应于RM-3.2)来填充div。但我有100个按钮，每个按钮都有一个唯一的ID，但都有一个共享的“按钮”类。如何编写代码使每个按钮都可用？(我猜我用的是getElementById，但我不知道怎么做！)

您可以查看正在进行的实际站点，如果这对您有帮助的话...www.freescaling.com/rhythmetrics (点击“选择你的节奏”按钮)。

哦，让我用按钮的代码更新我的原始帖子。每个按钮的代码如下：

    <div class="RM_rhythm">
        <audio id="5.1" preload='none'>
           <source src='audio/RM-beat.mp3' type='audio/mpeg' /><source src='audio/RM-beat.ogg' type='audio/ogg' />
        </audio>
        <button onclick="document.getElementById('5.1').play()">&#x25b6;</button>
        <a href="#" class="button">5-1</a>
            <img src="images/RM-5.1.png" width="172" height="67" alt="5-1">
    </div>

如您所见，按钮"5-1“调用图像文件"RM-5.1.png”。类似地，按钮"6-12“调用图像文件"RM-6.12.png”。现在，由于我的ajax文件中的代码，每个按钮都调用图像文件"RM-3.2.png“。如何指示每个按钮调用其对应的图像文件？非常感谢大家。

Answer 1

你能试试这个吗？我猜在一个元素集合上调用.html()是行不通的。这样，您就可以对$('.currentRhythmA')集合中的每个元素调用html()：

$( function() {
    $( '.button' ).click(function() {   
        var postData = '';  
        $.ajax( {
            url : 'js/ajax_file_A.php',
            type : 'post',
            data : postData,                
            success : function( resp ) {
                $('.currentRhythmA').each(function () {
                    $(this).html($('#measureA' , resp).html());
                });
            }
        });
        return false;
    });
});

Answer 2

问题1:对于类，您使用jquery uses语法.myClass (ids使用#myId)，因此在本例中，您将这样做：

$('.currentRhythmA').html($('#measureA' , resp).html());

问题2:由于您使用了$('.button')的类语法，所以如果所有按钮都有button类，那么您已经拥有了这些按钮的代码。

如果要将按钮添加到DOM中，并且发现它们不会触发.click()函数，请使用$(document).on('click', '.button', function() {});而不只是$('.button').click(function() {});

编辑：

因此，您可以使用使用类和.closest()和.find()的一般概念来找出id并调用图像

​

$(document).ready(function() {
    $('.button').on('click', function() {
        var id = $(this).closest('.RM_rhythm').find('audio').attr('id'); 
        // finds id by finding the .RM_rhythm div that its in and the id of the audio element
        $(this).closest('.RM_rhythm').find('img').attr("src", 'images/RM-' + id + '.png');
        // finds the image within the .RM_rhythm div that its in and assigns the src to call the image
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RM_rhythm">
    <audio id="5.1" preload='none'>
        <source src='audio/RM-beat.mp3' type='audio/mpeg' /><source src='audio/RM-beat.ogg' type='audio/ogg' />
    </audio>
    <button onclick="document.getElementById('5.1').play()">&#x25b6;</button>
    <a href="#" class="button">5-1</a>
    <img src="" width="172" height="67" alt="5-1"/>
</div>

​