如何使一個按鈕對應於不同的單擊div html jquery php？

Question

您可以在下面看到我的代碼。 我面臨着一個挑戰，我不知道如何使用一個按鈕來對應不同的點擊。 在php上，如果我將按鈕放在foreach循環內，它將創建很多按鈕，這不是我想要的。 在js中，如果將on.click按鈕放在foreach元素循環內，它還會創建很多on.click按鈕，因此我單擊一個按鈕，它將根據label_name的數目運行多次。 我想到了addClass，如果我單擊heart div，則使用js添加一個類，然后在button.on。（單擊）中獲取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();
 }