javascript - 页面内容更改时的布局问题

Question

我在这里遇到了一个问题，我一直在尝试 d/dx。我有一个库存页面的布局，并且 css 设置正确以使其正确显示。让我从 html/php 代码开始:

<div class='container-fluid second-row'>
        <div class='row' id='truckviewer-content'>
        </div>
        <div id="display">
        <div class='row content' id='content'>
            <div class='col-md-2 col-md-offset-2 page-title hidden-sm hidden-xs'>
                <h1 class='page-title-top'>Inventory</h1>
            </div>
            <div class='col-md-6'>
                <h3 class='page-sub-title'>Pick Your Rig</h3>
                <p>
                    Not only does Lone Mountain Truck Leasing provide a great selection of reliable semi trucks for sale, usually 3-5 years old, we also ensure your satisfaction because we encourage you to drive the truck off the lot for diagnostic evaluations and required inspections.
                </p>
                <p>
                    Our inventory includes fleets of semi trucks for sale, so take a look at just a few samples of our current inventory, and if you find something you like, give us a call toll-free at 866.512.5685, or contact us with the form below.
                </p>
            </div>
        </div>
        <div class='row'>
            <div class='col-md-10 col-md-offset-1'>
                <form class='form-inline center' role='form'>
                    <h3 class='inventory-sub-title'>Filters</h3>
                    <div class='form-group'>
                        <select id='yearFilter' class='filter form-control'>
                            <option value="allY" selected>-- year --</option>
                            <option value="2015">2015</option>
                            <option value="2014">2014</option>
                            <option value="2013">2013</option>
                            <option value="2012">2012</option>
                            <option value="2011">2011</option>
                            <option value="2010">2010</option>
                            <option value="2009">2009</option>
                            <option value="2008">2008</option>
                            <option value="2007">2007</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select id='makeFilter' class='filter form-control'>
                            <option value="allM" selected>-- Make --</option>
                            <option value="freightM">Freightliner</option>
                            <option value="intM">International</option>
                            <option value="kenM">Kenworth</option>
                            <option value="mackM">Mack</option>
                            <option value="peteM">Peterbilt</option>
                            <option value="volvoM">Volvo</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select  id='engineFilter' class='filter form-control'>
                            <option value="allE" selected>-- Engine --</option>
                            <option value="catE">Caterpillar</option>
                            <option value="cumE">Cummins</option>
                            <option value="detE">Detroit</option>
                            <option value="mackE">Mack</option>
                            <option value="volE">Volvo</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select id='transFilter' class='filter form-control'>
                            <option value="allT" selected>-- Transmission --</option>
                            <option value="10T">10 Speed</option>
                            <option value="13T">13 Speed</option>
                            <option value="18T">18 Speed</option>
                            <option value="autoT">Auto</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select id='apuFilter' class='filter form-control'>
                            <option value="allA" selected>-- APU --</option>
                            <option value="apuYes">Yes</option>
                            <option value="apuNo">No</option>
                        </select>
                    </div>
                    <a href="" id="showAll">Show All</a>
                </form>
            </div>
        </div>
            <?
                $truckorder = file_get_contents("truckorder.tpl");
                $truckorder = preg_replace('/\s+/', ' ', trim($truckorder));
                $tagname = "truckorder";
                $trucks = parseContent($truckorder, $tagname);
                $trucks = explode("|", $trucks); 
                foreach($trucks as $truck){
                    $truck = preg_replace('/\s+/', ' ', trim($truck));
                    $quickview = file_get_contents("groups/group_$truck/content/quickview.tpl");
                    $quickview = preg_replace('/\s+/', ' ', trim($quickview));              
                    $tagname = "quickfilter";
                    $filter = parseContent($quickview, $tagname);
                    $tagname = "quicktitle";
                    $title = parseContent($quickview, $tagname);
                    $tagname = "quickprice";
                    $price = parseContent($quickview, $tagname);
                    $tagname = "quicklook";
                    $specs = parseContent($quickview, $tagname);
                    $detailview = file_get_contents("groups/group_$truck/content/detailview.tpl");
                    $detailview = preg_replace('/\s+/', ' ', trim($detailview));
                    $tagname = "trucks";
                    $params = parseContent($detailview, $tagname);
                    $param = explode("|", $params);
                    $param1 = $param[0];
                    $param2 = $param[1];
                    $param3 = $param[2];
                    $param4 = $param[3];
                    $instock = getTruckTotals($param2,$param3,$param4);
                ?>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 truck<?=$filter?>">
                    <div class="item ">
                        <p class='truck-img-align'>
                            <img class="truckTip" src="groups/group_<?=$truck?>/photos/quicktruck.png" border="no-border" />
                        </p>
                        <a class='ajax ajax-main' data-price="<?=$price?>" data-title="<?=$title?>" data-stock="<?=$instock?>" data-truck="<?=$truck?>" href="detail/?id=<?=$truck?>"><div class="caption"><h4>Quick Look</h4><?=$specs?></div></a>
                    </div>
                        <h3 class='truck-title'><?=$title?></h3>
                        <h3 class='truck-price'><?=$price?></h3>
                        <p  class='in-stock'><?=$instock?></p>
                        <a class='ajax bottom-link' data-price="<?=$price?>" data-title="<?=$title?>" data-stock="<?=$instock?>" data-truck="<?=$truck?>" href="detail/?id=<?=$truck?>">Click or hover for more details</a>
                </div>
                <?
                }
                ?>
            </div>
    </div>

编辑:我已经更改了 javascript。我添加了一个新的排序算法，开始解决我面临的问题，但错误现在不同了。

$(function(){
    sortDisplay();
});

// Image Overlay
$('.item').hover(function() {
    $(this).find('div.caption').stop(false,true).fadeIn(200);
},
function(){
    $(this).find('div.caption').stop(false,true).fadeOut(200);
});
// Filtering
$("#showAll").click(function(){
    sortDisplay();
    $(".truck").addClass("allY allM allE allT allA");
    $("#yearFilter").val("allY");
    $("#makeFilter").val("allM");
    $('#engineFliter').val("allE");
    $('#transFliter').val("allT");
    $('#apuFliter').val("allA");
    $(".truck").show();
    // Update Filters
    $("#yearFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allY'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#makeFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allM'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#engineFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allE'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#transFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allT'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#apuFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allA'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
});
$('.filter').change(function(){
    sortDisplay();
    $(".truck").each(function(){
        $(this).removeClass("truck-reset");
    });
    $(".truck").addClass("allY allM allE allT allA");
    var year = $("#yearFilter").val();
    if(year !=='allY'){
        $(".truck").removeClass("allY");
    }   
    var make = $("#makeFilter").val();
    if(make !=='allM'){
        $(".truck").removeClass("allM");
    }   
    var eng = $("#engineFilter").val();
    if(eng !=='allE'){
        $(".truck").removeClass("allE");
    }   
    var trans = $("#transFilter").val();
    if(trans !=='allT'){
        $(".truck").removeClass("allT");
    }   
    var apu = $("#apuFilter").val();
    if(apu !=='allA'){
        $(".truck").removeClass("allA");
    }   
    $(".truck").hide();
    $(".truck").each(function(){
        if($(this).hasClass(year)&&$(this).hasClass(make)&&$(this).hasClass(eng)&&$(this).hasClass(trans)&&$(this).hasClass(apu)){
            $(this).fadeIn();
        }
    });
    //$("#anchor").slideto();
    // Update Filters
    $("#yearFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allY'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#makeFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allM'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#engineFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allE'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#transFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allT'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#apuFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allA'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });

});
// Check If Filter Exists Else Disable Select Option
$("#yearFilter option").each(function(){
    var thisClass = $(this).val();
    if($('.'+thisClass+'').size() < 1 && $(this).val() !=='allY'){
        $(this).attr('disabled','disabled');    
    }
});
$("#makeFilter option").each(function(){
    var thisClass = $(this).val();
    if($('.'+thisClass+'').size() < 1 && $(this).val() !=='allM'){
        $(this).attr('disabled','disabled');    
    }
});
$("#engineFilter option").each(function(){
    var thisClass = $(this).val();
    if($('.'+thisClass+'').size() < 1 && $(this).val() !=='allE'){
        $(this).attr('disabled','disabled');    
    }
});
$("#transFilter option").each(function(){
    var thisClass = $(this).val();
    if($('.'+thisClass+'').size() < 1 && $(this).val() !=='allT'){
        $(this).attr('disabled','disabled');    
    }
});
$("#apuFilter option").each(function(){
    var thisClass = $(this).val();
    if($('.'+thisClass+'').size() < 1 && $(this).val() !=='allA'){
        $(this).attr('disabled','disabled');    
    }
});
$('.ajax').click(function(e){
    e.preventDefault();
    var truckWindowId = $(this).data('truck');
    var truckWindowTitle = $(this).data('title');
    var truckWindowStock = $(this).data('stock');
    var truckWindowPrice = $(this).data('price');
    var content = {
        id : truckWindowId,
        title : truckWindowTitle,
        stock : truckWindowStock,
        price : truckWindowPrice
    };
    $.ajax({
        url: "../assets/server/inventory/getTruckDetails.php",
        type: "POST",
        data: content,
        dataType: "JSON",
        cache: false,
        success: function(data){
            var images = data.images;
            $('#display').fadeOut(function(){
                $('#content').fadeOut();
                $('#truckviewer-content').html(data.message).fadeIn();
                //shut off the carousel autoscroll feature
                $('.carousel').carousel({
                  interval: false
                });
                //allow for outside the box to be clickable and closer the div on click
                $(document).mouseup(function(e){
                    var container = $(".truckview");
                    if(!container.is(e.target) && container.has(e.target).length === 0){
                        $('.closer').trigger("click");
                    }
                });
            }); 
        }
    });
});
$(function(){
    $("#truckviewer-content").on('click', '.closer', function(e){
        e.preventDefault();
        var viewer = $('#close-button').data('toggle');
        $(viewer).fadeOut(function(){
            $('#content').fadeIn();
            $('#display').fadeIn();
        });
    });
});


function sortDisplay(){
    var count = 0;
    var vizCount = 0;
    if($(window).width() > 1200){
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');
            if(count <= 3){
                if(count == 0 && $(this).is(':visible')){
                    vizCount++;
                    $(this).addClass('view-sort-left');
                }else if(count == 3 && $(this).is(':visible')){
                    vizCount++;
                    $(this).addClass('view-sort-right');
                }else if($(this).is(":visible")){
                    vizCount++;
                }
            }else if(count > 3){
                if($(this).is(':visible')){
                    if(vizCount%4 === 0){
                        $(this).addClass('view-sort-left');
                        vizCount++;
                    }else if(vizCount%4 === 3){
                        $(this).addClass('view-sort-right');
                        vizCount++;
                    }else{
                        vizCount++;
                    }
                }
            }
            count++;
        });
    }
}

编辑:现在发生的事情是，当检查第二行元素时，对象将不会附加 .sort-view-left 或 .sort-view-right 的排序类，但它们在第一排。如果您需要进一步解释，请发表评论，我会回答。

这一切都正常工作，但我确定我需要调整一下我想弄清楚要做什么。

当元素根据您选择的过滤器更改显示时，CSS 布局不会自行更正，这是因为用于选择它们的第 n 个子选择器。

.truck{
    width: 16%;
    margin-left: 1%;
    margin-right: 1%;
    min-height: 350px;
    margin-top: 25px;
}
.view-sort-left{
    margin-left: 14% !important;
}

.view-sort-right{
    margin-right: 14% !important;
}

.truck-reset:nth-child(4n-1){
    margin-left: 14%;
}

有了上面给出的所有信息，是时候进入正题了。我想弄清楚的是如何更改它，以便系统足够智能，可以决定在库存页面上显示多少对象，然后基于此计算一个漂亮的 css 表。我几乎正在考虑从一开始就这样做。然后也根据页面宽度计算它。这可能是一个太大的问题，无法在这里发布。我不确定，我对这里的帖子还是有点菜鸟。如果有人有想法，请告诉我。如果您认为我应该巩固和缩小这个问题，也请告诉我，我可以那样解决问题。不过，我想和这里的某个人一起思考，这样我才能弄清这个问题的根源。希望很快能收到一些人的来信!

Answer 1

想通了，我需要将两个循环合并为一个循环，并使用 if 语句中的选项来确定我的类应该去哪里。

function sortDisplay(){
    var count = 0;
    var vizCount = 0;
    if($(window).width() > 1200){
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');     
                if((count == 0 || vizCount%4 == 0) && $(this).is(':visible')){
                        $(this).addClass('view-sort-left');
                        vizCount++;
                }else if((count == 3 || vizCount%4 == 3)&& $(this).is(':visible')){
                        $(this).addClass('view-sort-right');
                        vizCount++;
                }else if($(this).is(":visible")){
                    vizCount++;
                }
            count++;
        });
    }else if($(window).width() <= 1200 && $(window).width() > 992){
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');     
                if((count == 0 || vizCount%3 == 0) && $(this).is(':visible')){
                        $(this).addClass('view-sort-left');
                        vizCount++;
                }else if((count == 2 || vizCount%3 == 2)&& $(this).is(':visible')){
                        $(this).addClass('view-sort-right');
                        vizCount++;
                }else if($(this).is(":visible")){
                    vizCount++;
                }
            count++;
        }); 
    }else{
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');
        });
    }
}

$(window).resize(function(){
    sortDisplay();
})