Question

当您点击此处第二个“客户”标题下的任何按钮时，页面会向上移动到顶部：http://kodiakgroup.com/clients.php

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

第一部分改变了：

//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;
        }); 

    });

Answer 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()函数重复。

它没有经过测试，但在理论上，它应该可行

Answer 2

这是因为您要从ul#customers容器中删除内容，请在HTML中查看此行

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

有一些解决方法可以避免此滚动，您可以查看此post

Answer 3

如此处的另一个答案所示，请尝试在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 animations

设置动画高度

Answer 4

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

Jquery页面在复选框更改功能上移回到顶部

4 个答案: