如何让一个按钮对应不同的点击 div html jquery php？

Question

您可以在下面看到我的代码。我面临一个挑战，我不知道如何使用一个按钮来对应不同的点击。在 php 上，如果我将按钮放在 foreach 循环中，它会创建很多按钮，这不是我想要的。在js中，如果我把on.click按钮放在foreach元素循环里面，也会创建很多on.click按钮，所以我点击一个按钮，它会运行多少次取决于label_name的个数。我想addClass，如果我点击心脏div，我使用js添加一个类，然后在button.on.(click)中获取attr('id')，这样我可以在我的服务器php和mysql中区分它们可以请求相应的数据。但问题是，如果用户点击每个 div，然后每个 div 都添加类，那么问题又来了。

var current_page = 1;

var elements_body = {
    "heart": "1",
    "eye": "2",
    "ear_nose_throat": "3",
    "hand_foot_mouth": "4"
};
jQuery.each(elements_body, function (label_name, label_num) {
    var disease_label = $('#' + label_name + '_d');

    disease_label.on('click', function () {

        var data = {
            action: 'body_part_keyword', //wordpress loading url
            postSearchNonce: MyAjaxSearch.postSearchNonce,
            current_page: current_page,
            label_name: label_name //this label_name will differentiate data that need to request from mysql in the action.php 
        };
        $.ajax({
            url: MyAjaxSearch.ajaxurl,
            type: 'POST',
            cache: false,
            data: data,
            success: function (data) {

                disease_menu_result.append(data);
                current_page++

            }
        }); //ajax
    });

}); //jQuery.each

$('#loadmorebutton_body').on('click', function () {
    //I dont know how can I make this button to correspond above code

});

<div id="disease_menu">

    <?php
        $arr = Array(
            'heart'=>'heart',
            'eye'=>'eye',
            'ear_nose_throat'=>'ear nose throat',
            'hand_foot_mouth'=>'hand foot mouth'
        );

        foreach ($arr as $key=>$value) {
    ?>
    <div class="disease_li" id="disease_li_<?php echo $key;?>">
        <span class="disease_span" id="<?php echo $key;?>_d"><label>(<?php echo $value;?>)</label>diseases</span>
    </div>
    <!--disease_li-->

    <?php }?>
</div>
<!--disease_menu-->

<button id="loadmorebutton_body">Load More</button>

Answer 1

使用javascript函数：

function MyFunction() {
    jQuery.each( elements_body, function( label_name, label_num) {
        var disease_label= $('#'+ label_name + '_d'); 
        disease_label.on('click',function(){         
        var data={ 
                        action: 'body_part_keyword',//wordpress loading url
                    postSearchNonce : MyAjaxSearch.postSearchNonce,
                      current_page:current_page,
                     label_name:label_name//this label_name will differentiate data that need to request from mysql in the action.php 
               };
        $.ajax({
            url: MyAjaxSearch.ajaxurl,
            type:'POST',
            cache: false,
            data: data,
         success: function(data){

                          disease_menu_result.append(data);
                          current_page++

            }
                });//ajax
      });

      });
}
 $('#loadmorebutton_body').on('click',function(){
     MyFunction();
 }