1
我被困在這裏，我一直在嘗試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 - 視圖 - 左或的.sort視右排序類，但他們在第一行。如果您需要進一步解釋請評論，我會回答。
這一切都正常工作，但我敢肯定，我將需要與我想弄明白該怎麼做的事情一起玩。
當項目根據您選擇的過濾器更改顯示時，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表格。我幾乎考慮從一開始就這樣做。然後還根據頁面寬度進行計算。這可能是一個太大的問題在這裏發佈。我不確定，我在這裏的帖子上仍然是一個小白菜。如果有人有一個想法，但讓我知道。如果你認爲我應該鞏固和縮小這個問題，那麼讓我也知道，並且我可以通過這種方式解決問題。我想把我的大腦與這裏的某個人在一起，以便我能夠深入瞭解這個問題。希望很快聽到一些人的消息！