1

You can see my code below. I face a challenge that I don't know how to use one button to correspond different click. On the php, if I put the button inside the foreach loop, it will create a lot of button, that's not what I want. In the js, if I put the on.click button inside the foreach elements loop, it will also create a lot of on.click button, so I click one button, it will run many times depends on the number of label_name. I think about addClass, if I clicked the heart div, I use js to add a class, and then get the attr('id') inside button.on.(click), so I can differentiate them in my server php and mysql can request the correspond data. But the problem is that if a user click every div, then every div add classes, then problem again.

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>

1 Answer 1

0

Use javascript functions :

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();
 }
1
  • it run a lot of times.
    – conan
    May 8, 2015 at 7:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.