Question

以下jQuery的目标是从服务器加载图像，然后控制每页图像的数量，以及浏览页面。它不起作用。我希望有人可以了解它的错误。

我已经让分页工作了，但是然后组合框页面选择器不起作用。我已经让组合框选择器工作，但然后图像和分页将不会加载。现在只显示组合框，虽然它看起来好像它有效但没有图像可见，所以很难分辨。

HTML：

<div id="loading"></div>
<div id="gallery_container">
    <ul class="new_arrivals_gallery"></ul>
    <div class="pagination"></div>
</div>
<form>
    <label>Images Number:</label>
    <select id="imgNum" name="imgNum">
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="20">20</option>      
    </select>
</form>

jQuery：

slideshow = { page: 0, imgs: '' };

function loadData(){
    loading_show();
    gallery_hide();                    
    $.ajax
    ({
        type: "GET",
        url: "new_arrivals_data.php",
        data: slideshow,
        success: function(msg) {
            gallery_show();
            $("#gallery_container").html(msg);
            console.log(msg);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // Tell the human that something broke.
        },
        complete: function() {
            // This is always called regardless of success or failure.
            loading_hide();
        }
    });
}
loadData(1);  // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
    slideshow.page = $('#gallery_container .pagination li.active').attr('p');
    loadData();
});           
$('#go_btn').live('click',function(){
    slideshow.page = parseInt($('.goto').val());
    var no_of_pages = parseInt($('.total').attr('a'));
    if(page != 0 && page <= no_of_pages){
        loadData();
    }else{
        alert('Enter a PAGE between 1 and '+no_of_pages);
        $('.goto').val("").focus();
        return false;
    }
});

//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
    console.log('hi');
    slideshow.imgs = $('imgNum').val();
    loadData();
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;

//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
    .prop("selected","selected");
    $("#imgNum").change();

原始代码

HTML：

<div id="loading"></div>
<div id="gallery_container">
    <ul class="new_arrivals_gallery"></ul>
    <div class="pagination"></div>    
</div>
<form>
    <label>Images Number:</label>
    <select id="imgNum" name="imgNum">
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="20">20</option>      
    </select>
</form>

jQuery Ajax：

function loading_show(){
    $('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
    $('#loading').fadeOut('fast');
}                
function gallery_show(){
    $('#gallery_container').fadeIn('slow');
}
function gallery_hide(){
    $('#gallery_container').fadeOut(10);
}

function loadData(page){
    loading_show();
    gallery_hide();                    
    $.ajax
    ({
        type: "GET",
        url: "new_arrivals_data.php",
        data: {page:page, imgs: value},
        success: function(msg)
        {
            $("#gallery_container").ajaxComplete(function(event, request, settings)
            {
                gallery_show();
                loading_hide();
                $("#gallery_container").html(msg);
            });
        }
    });
}
loadData(1);  // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
    var page = $(this).attr('p');
    loadData(page);
});           
$('#go_btn').live('click',function(){
    var page = parseInt($('.goto').val());
    var no_of_pages = parseInt($('.total').attr('a'));
    if(page != 0 && page <= no_of_pages){
        loadData(page);
    }else{
        alert('Enter a PAGE between 1 and '+no_of_pages);
        $('.goto').val("").focus();
        return false;
    }
});

//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
    //The combo box
    var sel = $(this);
    //Selected value
    var value = sel.val();
    loadData(page);
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;

//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
    .prop("selected","selected")
    .change();

感谢您的帮助。

Answer 1

这可能会解决它：

包装loadData（1）;在jQuery的文档就绪函数中行，如下所示：

$(document).ready(){
  loadData(1)
}

编辑：

OR

1。 var value = sel.val（）

值是关键字，不要将其用作变量名。

2

$("#imgNum...")

需要在$（文件）.ready（function（）{here}）;

3

loadData(1);

不需要1。

4。它看起来不像在AJAX中返回li.active，但它在jQuery中被引用

5。应该在调用gallery_show（）之前加载#gallery_container的HTML

Answer 2

管理让这个工作。特别是jQuery作为HTML很好。

我想我仍然可以做一些普通的清理工作。如果您有任何建议，请告诉我们！

以下是正常运行的代码：

(function() {
    var page;

    function loading_show(){
        $('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
    }
    function loading_hide(){
        $('#loading').fadeOut('fast');
    }                
    function gallery_show(){
        $('#gallery_container').fadeIn('slow');
    }
    function gallery_hide(){
        $('#gallery_container').fadeOut(10);
    }


    function loadData(page, imgs){
        loading_show();
        gallery_hide();                    
        $.ajax
        ({
            type: "GET",
            url: "new_arrivals_data.php",
            data: {page:page, imgs:imgs},
            success: function(msg) {
                $("#gallery_container").html(msg);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // Tell the human that something broke.
            },
            complete: function() {
                // This is always called regardless of success or failure.
                gallery_show();
                loading_hide();
            }
        });
    }
    loadData(1);  // For first time page load default results
    $('#gallery_container .pagination li.active').live('click',function(){
        var imgs = $("#imgNum").val();
        var page = $(this).attr('p');
        loadData(page, imgs);
    });           
    $('#go_btn').live('click',function(){
        var imgs = $("#imgNum").val();
        var page = parseInt($('.goto').val());
        var no_of_pages = parseInt($('.total').attr('a'));
        if(page != 0 && page <= no_of_pages){
            loadData(page, imgs);
        }else{
            alert('Enter a PAGE between 1 and '+no_of_pages);
            $('.goto').val("").focus();
            return false;
        }
    });

    //Bind the onChange event to Fetch images on combox selection
    $("#imgNum").change(function(){
        //The combo box
        var sel = $(this);
        //Selected images value
        var imgs = sel.val();
        var page = $('#cur_page').attr('cur_page');
        //Feth the images
        loadData(page, imgs);
    })
    //You should store the current selected option in a cookie
    //For the sake of the example i'll set the default permanently to 12
    var imgNum_selected = 16;

    //set the initial selected option and trigger the event
    $("#imgNum [value='"+imgNum_selected+"']").prop("selected","selected").change();

}());

感谢您的帮助！

jQuery Ajax在设计时加载PHP文件时遇到问题

2 个答案: