1

当您单击此处第二个“客户”标题下的任何按钮时，页面将返回顶部：http: //kodiakgroup.com/clients.php

我已经尝试了该preventDefault功能以及您在下面看到的更改功能中的return false建议。看看我能做些什么来防止这种行为？

第一部分更改：

//Toggle select all/deselect function
        $('#vertical-filters input').change(function (e) {
                $('.selectAllBoxes').prop('checked', false);
                getCustomers();
                e.preventDefault();
                return false;
        }); 

        $('.selectAllBoxes').change(function (e) {
                $('#vertical-filters input').prop('checked', false);
                getCustomers();
                e.preventDefault();
                return false;
        });

所有的JavaScript：

$(function () {
        $('.selectAllBoxes').prop('checked', true);//Set checkboxes as checked by default
        getCustomers(); //Initially call all customers

        function getCustomers()
        {   
            $('ul#customers').html('');//empty list
            var definedCategoryArray=new Array();
            var categoriesPlural= new Array();
            var customerSplit=new Array();


            for(var x=0; x< $('#vertical-filters input').length; x++){
                var thisItem=$('#vertical-filters input')[x];
                var thisItemName=$(thisItem).attr('id');
                if($('.selectAllBoxes').is(':checked')){
                    definedCategoryArray[thisItemName]=true;
                }
                else{
                    if ($(thisItem).is(':checked'))
                        definedCategoryArray[thisItemName]=true;
                    else
                        definedCategoryArray[thisItemName]=false;
                }
            }


            $.getJSON('customers.json', function(data) {
                for(var index in definedCategoryArray){ //cycle through categories array
                    for(var i=0; i<data.customers.length; i++){ //cycle through json data
                        if (definedCategoryArray[index]==true){//if the value in the array is true (item checked)
                            //console.log(data.customers[i].customerName+ ' : ' + data.customers[i].category);
                                if(data.customers[i].category.indexOf(',') != -1) //if there is more than one category, detect the comma seperating them
                                    categoriesPlural = data.customers[i].category.split(',');   
                                else //there is only one category
                                    categoriesPlural[0]=data.customers[i].category;
                                for (var y = 0; y<categoriesPlural.length; y++){
                                        //console.log(categoriesPlural[y]);
                                        if(categoriesPlural[y] == index){ //match category (from definedCategoryArray index) to items in json object to parse
                                            $('ul#customers').append('<li class="' +data.customers[i].customerName.replace(/\s+/g, '-') + '" id="'+data.customers[i].customerName.replace(/\s+/g, '-')+'"><a href="'+ data.customers[i].link +'" title="'+ data.customers[i].customerName +'" target="_blank"><img src="'+ data.customers[i].imageLink +'" alt="'+ data.customers[i].customerName +'" /></a></li>');
                                            checkDuplicates(data.customers[i].customerName.replace(/\s+/g, '-'));
                                        }
                                }
                        }
                    }
                }
            }).fail(function() { console.log( "error" ); });
        }

        function checkDuplicates(customerName){
            for(var x=0; x< $('#customers li').length; x++){//loop through clients already on the page to prevent duplicates
                var thisClient=$('#customers li')[x];
                var thisClientName=$(thisClient).attr('id');
                    if(thisClientName == customerName){
                        var superClient1=$('.'+customerName)[1];
                        var superClient2=$('.'+customerName)[2];
                        if (superClient1)
                            $(superClient1).css('display','none');
                        if(superClient2)
                            $(superClient2).css('display','none');
                        //console.log(customerName + '=' + thisClientName + ' emptied');
                    }
                }
        }

        //Toggle select all/deselect function
        $('#vertical-filters input').change(function (e) {
                $('.selectAllBoxes').prop('checked', false);
                getCustomers();
                e.preventDefault();
                return false;
        }); 

        $('.selectAllBoxes').change(function (e) {
                $('#vertical-filters input').prop('checked', false);
                getCustomers();
                e.preventDefault();
                return false;
        }); 

    });
4

4 回答 4

1

它实际上并没有回到顶部，但您正在删除项目。页面正在缩小并且滚动消失，然后您添加项目并且页面展开而不向后滚动。

一个简单的技巧是ul在删除项目之前修复高度，然后删除属性样式。像那样 ：

$('#vertical-filters input').change(function (e) {
    $('.selectAllBoxes').prop('checked', false);
    $('ul#customers').height($('ul#customers').height()); //fix the height
    getCustomers();
    $('ul#customers').removeAttr('style'); //Reset the height
});

重复所有.change()功能。

它没有经过测试，但理论上它应该可以工作

于 2013-05-10T17:33:15.193 回答
1

那是因为您要从ul#customers容器中删除内容，请检查 HTML 中的这一行

function getCustomers()
{   
    $('ul#customers').html('');//empty list
    ...
}

有一些解决方法可以避免这种滚动，你可以查看这篇文章

于 2013-05-10T17:52:24.133 回答
0

正如此处的另一个答案所建议的那样，尝试在ul. 这将是我的方法：

function getCustomers() {   
    var $customers = $('ul#customers');
    $customers.css('height', $customers.height());
    $customers.html(''); //empty list

    // the rest of your getCustomers() function

    // at the very end, remove the height
    $customers.css('height', '');
}

因此，您首先要在ul. 这将防止它崩溃。然后，您可以清空它并添加新内容。最后，您删除高度，然后ul将折叠到其内容所需的任何高度。

这可能仍然会有点震动。您可以考虑使用jQuery $.animate()或CSS3 动画为高度设置动画

于 2013-05-13T03:34:52.610 回答
-1

多谢你们！两个都是很好的答案，所以我不确定要标记哪一个。我实际上只是在容器上设置了一个最小高度并修复了它！:)

于 2013-05-10T18:21:15.403 回答