jQuery使用一个变量从一个函数到另一个函数

Question

I write these functions in jquery. My one function is onclick and another one is onready function. I want to use this variable "loadmorecount_rest_num" in my onready function. How do I use this variable "loadmorecount_rest_num" in my onready function?

I write these script for load more values from database in php using jquery.Now i want to hide load more button if the data is "var loadmorecount_rest_num<0".on ready function. Right now i hide that button using onclick event.I want to hide it using on ready event.

var STATUS= $('#status').val();
 var TYPE= $('#Property').val();
 var ADDRESS= $('#Address').val();
 var MINA= $('#min_area').val();
 var MAXA= $('#max_area').val();
 var MINP= $('#min_price').val();
 var MAXP= $('#max_price').val();
 var MINIMUMBED= $('#minbed').val();
 var MAXIMUMBED= $('#maxbed').val();
 var MINBATHROOM= $('#minbath').val();
 var MAXBATHROOM= $('#maxbath').val(); 

 var total_data_count= $('#total_data_count').val();
 var MINL = $("#minimum_limit").val();
 var current_data_count = $("#page_data_count").val();
 var MAXL = $("#maximum_limit").val();
 var new_start_limit= parseInt(MAXL)+parseInt(MINL);
 $("#minimum_limit").val(new_start_limit); 
 var data_start_limit_pass = $('#minimum_limit').val();
 var data_max_limit_pass = $('#maximum_limit').val();

$.ajax({

            type : 'POST',
            url  : '<?php echo MY_SITE_URL ;?>'+'webapi.php',
               data :{task:'Properties.loadmore',MINL:new_start_limit,MAXL:MAXL,STATUS:STATUS,TYPE:TYPE,ADDRESS:ADDRESS,MINA:MINA,
            MAXA:MAXA,MINP:MINP,MAXP:MAXP,MINIMUMBED:MINIMUMBED,MAXIMUMBED:MAXIMUMBED,MINBATHROOM:MINBATHROOM,MAXBATHROOM:MAXBATHROOM},   
              // data :{task:'Properties.loadmore',MINL:new_start_limit,MAXL:MAXL,get_data:get_data},  
            error: function() {
            console.log('somthing wrong');
            },

            success: function(response) {
                var json_data= JSON.parse(response);
                var Properties=json_data.Response;
                var count = json_data.Response.length;
                var old_current_data_count = $('#page_data_count').val(); 
                var new_current_data_count= parseInt(old_current_data_count)+ parseInt(count);
                $('#page_data_count').val(new_current_data_count);

                var html='';  

                $.each(Properties, function( key, value ) {

                    var nowDate = new Date();
                    var oneDay = 24*60*60*1000;
                    var secondDate = new Date(value.system_insert_date);
                    var diffDays = Math.round(Math.abs((nowDate.getTime() - secondDate.getTime())/(oneDay)));
                    // console.log(diffDays);

                    html = html+'<div class="listing-item">';
                        html = html+'<a href="#" class="listing-img-container">';
                            html = html+'<div class="listing-badges">';
                                html = html+'<span>'+value.current_status+'</span>';
                            html = html+'</div>';
                            html = html+'<div class="listing-img-content">';
                                html = html+'<span class="listing-price">$'+value.close_price+'<i>'+value.list_price_per_sqft+'/ sq ft</i></span>';
                                html = html+'<span class="like-icon"></span>'; 
                            html = html+'</div>'; 
                            html = html+'<img src="images/listing-05.jpg" alt="">';
                        html = html+'</a>';

                         html = html+'<div class="listing-content">';
                            html = html+'<div class="listing-title">';
                                        html = html+'<h4><a href="#" class="listing-address popup-gmaps">'+value.street_number+','+value.street_name+'</a></h4>';
                                        html = html+'<a href="https://maps.google.com/maps?q='+value.google_address+'" class="listing-address popup-gmaps">';
                                            html = html+'<i class="fa fa-map-marker"></i>';
                                            html = html+''+value.google_address+'';
                                        html = html+'</a>';
                                        html = html+'<a href="#" class="details button border">Details</a>';
                            html = html+'</div>';
                                html = html+'<ul class="listing-details">';
                                    html = html+'<li>'+value.sqft+' Sqft</li>';
                                    html = html+'<li>'+value.beds+' Beds</li>';
                                    html = html+'<li>N/A</li>';
                                    html = html+'<li>'+value.bathfull+' Baths</li>';
                                    html = html+'<li>'+value.bathhalf+' Half Baths</li>';
                                html = html+'</ul>';
                                    html = html+'<div class="listing-footer">';
                                        html = html+'<a href="#"><i class="fa fa-user"></i>'+value.listing_office_name+'</a>';
                                        html = html+'<span><i class="fa fa-calendar-o"></i>'+diffDays+' Days ago</span>';
                                    html = html+'</div>';
                            html = html+'</div>'; 
                        html = html+'</div>';


                });
                        $('#propertysearch').append(html);
                         $("#loadmore_btn").show();
                        $("#loadmorecount_rest").html('');
                        var loadmorecount_rest_num = parseInt(total_data_count)-(data_start_limit_pass)-(data_max_limit_pass);
                        $("#loadmorecount_rest").html(loadmorecount_rest_num);
                        var current_num_data=$('#page_data_count').val() ;


                           if(loadmorecount_rest_num==0 || loadmorecount_rest_num<0){

                       $("#loadmore_btn").hide();   
                   }
                   else{
                      $("#loadmore_btn").show();
                   }      


        }
}); 

});

 $(document).ready(function(){

 });

Answer 1

It is better to use onclick function inside your ready function. Take a look at this link: Why should $.click() be enclosed within $(document).ready()?

You could do something like this:

$(document).ready(function(){
    var loadmorecount_rest_num = 0;

    $( "#loadmore_btn" ).on( "click", function() {
        $("#loadmore_btn").show();
        $("#loadmorecount_rest").html('');
        loadmorecount_rest_num = parseInt(total_data_count)-(data_start_limit_pass)-(data_max_limit_pass);
        $("#loadmorecount_rest").html(loadmorecount_rest_num);
        var current_num_data=$('#page_data_count').val() ;
        if(loadmorecount_rest_num==0 || loadmorecount_rest_num<0)
        {
            $("#loadmore_btn").hide();  
        }
        else{
            $("#loadmore_btn").show();
        }    
    });
    //You can use var loadmorecount_rest_num inside document ready now.
})

Try to enclose your code with a function, like this:

function yourFunction(loadmorecount_rest_num){
    $( "#loadmore_btn" ).on( "click", function() {
        $("#loadmore_btn").show();
        $("#loadmorecount_rest").html('');
        loadmorecount_rest_num = parseInt(total_data_count)-(data_start_limit_pass)-(data_max_limit_pass);
        $("#loadmorecount_rest").html(loadmorecount_rest_num);
        var current_num_data=$('#page_data_count').val() ;
        if(loadmorecount_rest_num==0 || loadmorecount_rest_num<0)
        {
            $("#loadmore_btn").hide();  
        }
        else{
            $("#loadmore_btn").show();
        }    
    });
}
$(document).ready(function(){
    var loadmorecount_rest_num = 0;
    yourFunction(loadmorecount_rest_num);
})

Answer 2

Without getting much into what exactly you are trying to do, one thing I can suggest is :

window.loadmorecount_rest_num = parseInt(total_data_count)-(data_start_limit_pass)-(data_max_limit_pass);

This will attach loadmorecount_rest_num to a global object (window). This is not a good practice through. You can also call this click listener function function from ready function itself and return the value of loadmorecount_rest_num back to ready function and use it wherever you want.

Or as other people are suggesting declare the loadmorecount_rest_num variable in ready function and call the listener from within the ready function. That will maintain the last state of the loadmorecount_rest_num .

Answer 3

You should wrap your function under $(document).ready and can define a global variable outside the scope of the function if you want to make use of this variable in some other function like this.

$(document).ready(function(){

var loadmorecount =0;

$( "#loadmore_btn" ).on( "click", function() {
    $("#loadmore_btn").show();
        $("#loadmorecount_rest").html('');
        loadmorecount_rest_num = parseInt(total_data_count)-(data_start_limit_pass)-(data_max_limit_pass);
        $("#loadmorecount_rest").html(loadmorecount_rest_num);
        var current_num_data=$('#page_data_count').val() ;
        if(loadmorecount_rest_num==0 || loadmorecount_rest_num<0)
        {
                $("#loadmore_btn").hide();  
        }
        else{
                $("#loadmore_btn").show();
         }    
 });

function someOtherFunction(){
//make use of global variable loadmorecount
}

someOtherFunction(); //call function
 })

Answer 4

Declare var loadmorecount_rest_num at top ie before $( "#loadmore_btn" ).on( "click", function() { ... this will make your variable global & you can access it in other functions.

-or-

simply remove var from your variable loadmorecount_rest_num and then try to access it another function.