使用AJAX动态装箱

Posted 2021-02-25

This is how you can create page box elements that are loaded via AJAX and can be refreshed instantly without a whole page reload.

jQuery(document).ready(function($) {
    //event to show the box controls when the mouse hovers the box
    //applies to all elements with class="box"
    $('.box').mouseover(function(){
        //replace string "box" with "controls"
        var dyn_var = "#" + this.id.replace("box","controls");
        $(dyn_var).show();
    });
 
    //initialize box controls
    $('.box .controls').hide(); //hide all box controls
 
//hide box when mouse exits box
    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });
 
    //load box content (loads after page loads)
    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    //etc...
});