HTML datalist，每个选项的价格范围
我创建了一个数据主义者，根据卧室的数量，然后按价格过滤公寓。我的问题是我需要指出每步的价格范围而不是每步的一个价格。我尝试过不同的数据主义者并试图添加值，标签等无济于事。
以下是需要显示价格范围的屏幕截图，而不仅仅是现在显示的一个价格（R1600000），它需要显示R1600000到R3180000。
Datalist to filter rooms and prices
JS和HTML看起来像这样：
var pricesarr = [
["A","STUDIO","2nd ","9","49.8","-","After Hours",1675000,"SF","unit_a.html"],
["A","STUDIO","3rd ","9","49.8","-","After Hours",1675000,"SF","unit_a.html"],
["A","STUDIO","4th ","9","49.8","-","After Hours",1675000,"SF","unit_a.html"],
["A","STUDIO","5th ","9","49.8","-","After Hours",1675000,"SF","unit_a.html"],
["A","STUDIO","6th ","9","49.8","-","After Hours",1675000,"SF","unit_a.html"],
["A","STUDIO","3rd ","9","49.8","± 4","1",1815000,"WF","unit_a.html"],
["A","STUDIO","4th ","9","49.8","± 4","1",1875000,"WF","unit_a.html"],
["A","STUDIO","5th ","9","49.8","± 4","1",1935000,"WF","unit_a.html"],
["A","STUDIO","6th ","9","49.8","± 4","1",1995000,"WF","unit_a.html"],
["A","STUDIO","7th ","9","49.8","± 4","1",1995000,"WF","unit_a.html"],
["B","1 BED STRAIGHT","2nd ","7","49.6","4.2","1",1950000,"SF","unit_b.html"],
["B","1 BED STRAIGHT","3rd ","7","49.6","4.2","1",2010000,"SF","unit_b.html"],
["B","1 BED STRAIGHT","4th ","7","49.6","4.2","1",2070000,"SF","unit_b.html"],
["B","1 BED STRAIGHT","5th ","7","49.6","4.2","1",2130000,"SF","unit_b.html"],
["B","1 BED STRAIGHT","6th ","7","49.6","4.2","1",2190000,"SF","unit_b.html"],
["B","1 BED STRAIGHT","3rd ","10","49.6","4.2","1",2235000,"WF","unit_b.html"],
["B","1 BED STRAIGHT","4th ","10","49.6","4.2","1",2295000,"WF","unit_b.html"],
["B","1 BED STRAIGHT","5th ","10","49.6","4.2","1",2355000,"WF","unit_b.html"],
["B","1 BED STRAIGHT","6th ","10","49.6","4.2","1",2415000,"WF","unit_b.html"],
["B","1 BED STRAIGHT","7th ","10","49.6","4.2","1",2475000,"WF","unit_b.html"],
["C","1 BED ZIGZAG","2nd ","2","50.2","4.2","1",1975000,"SF","unit_c.html"],
["C","1 BED ZIGZAG","3rd ","2","50.2","4.2","1",2035000,"SF","unit_c.html"],
["C","1 BED ZIGZAG","4th ","2","50.2","4.2","1",2095000,"SF","unit_c.html"],
["C","1 BED ZIGZAG","5th ","2","50.2","4.2","1",2155000,"SF","unit_c.html"],
["C","1 BED ZIGZAG","6th ","2","50.2","4.2","1",2215000,"SF","unit_c.html"],
["C","1 BED ZIGZAG","3rd ","8","50.2","4.2","1",2275000,"WF","unit_c.html"],
["C","1 BED ZIGZAG","4th ","8","50.2","4.2","1",2335000,"WF","unit_c.html"],
["C","1 BED ZIGZAG","5th ","8","50.2","4.2","1",2395000,"WF","unit_c.html"],
["C","1 BED ZIGZAG","6th ","8","50.2","4.2","1",2455000,"WF","unit_c.html"],
["C","1 BED ZIGZAG","7th ","8","50.2","4.2","1",2515000,"WF","unit_c.html"],
["D","1 BED TRIANGLE","2nd ","1","55.1","4.8","1",2260000,"SF","unit_d.html"],
["D","1 BED TRIANGLE","3rd ","1","55.1","4.8","1",2320000,"SF","unit_d.html"],
["D","1 BED TRIANGLE","4th ","1","55.1","4.8","1",2380000,"SF","unit_d.html"],
["D","1 BED TRIANGLE","5th ","1","55.1","4.8","1",2440000,"SF","unit_d.html"],
["D","1 BED TRIANGLE","6th ","1","55.1","4.8","1",2500000,"SF","unit_d.html"],
["E","2 BED TRIANGLE","8th ","1","99.1","12.5 + 6.2","2",4778000,"SF","unit_e.html"],
["F","2 BED CORNER","2nd ","1","104.5","25.8 + 6.8","2",5525000,"SF","unit_f.html"],
["F","2 BED CORNER","3rd ","1","104.5","25.8 + 6.8","2",5625000,"SF","unit_f.html"],
["F","2 BED CORNER","4th ","1","104.5","25.8 + 6.8","2",5725000,"SF","unit_f.html"],
["F","2 BED CORNER","5th ","1","104.5","25.8 + 6.8","2",5825000,"SF","unit_f.html"],
["F","2 BED CORNER","6th ","1","104.5","25.8 + 6.8","2",5925000,"SF","unit_f.html"],
["F","2 BED CORNER","3rd ","1","104.5","25.8 + 6.8","2",6000000,"WF","unit_f.html"],
["F","2 BED CORNER","4th ","1","104.5","25.8 + 6.8","2",6100000,"WF","unit_f.html"],
["F","2 BED CORNER","5th ","1","104.5","25.8 + 6.8","2",6200000,"WF","unit_f.html"],
["F","2 BED CORNER","6th ","1","104.5","25.8 + 6.8","2",6300000,"WF","unit_f.html"],
["F","2 BED CORNER","7th ","1","104.5","25.8 + 6.8","2",6400000,"WF","unit_f.html"],
["G","2 BED CORNER EX 1","3rd ","1","113","26.6 + 6.9","2",6425000,"WF","unit_g.html"],
["G","2 BED CORNER EX 1","4th ","1","113","26.6 + 6.9","2",6525000,"WF","unit_g.html"],
["G","2 BED CORNER EX 1","5th ","1","113","26.6 + 6.9","2",6625000,"WF","unit_g.html"],
["G","2 BED CORNER EX 1","6th ","1","113","26.6 + 6.9","2",6725000,"WF","unit_g.html"],
["G","2 BED CORNER EX 1","7th ","1","113","26.6 + 6.9","2",6825000,"WF","unit_g.html"],
["H","2 BED CORNER EX 2","2nd ","1","111.7","17.4 + 6.9","2",5485000,"SF","unit_h.html"],
["H","2 BED CORNER EX 2","3rd ","1","111.7","17.4 + 6.9","2",5585000,"SF","unit_h.html"],
["H","2 BED CORNER EX 2","4th ","1","111.7","17.4 + 6.9","2",5685000,"SF","unit_h.html"],
["H","2 BED CORNER EX 2","5th ","1","111.7","17.4 + 6.9","2",6626000,"SF","unit_h.html"],
["H","2 BED CORNER EX 2","6th ","1","111.7","17.4 + 6.9","2",6725000,"SF","unit_h.html"],
["I","LOFT","8th ","16","74.9","4.2","2",3225000,"SF","unit_i.html"],
["I","LOFT","8th ","22","74.9","4.2","2",3525000,"WF","unit_i.html"],
["J","SPECIAL LOFT","7th (North)","1","79.1","16.2 + 4.2","2",4250000,"SF","unit_j.html"],
["J","SPECIAL LOFT","7th (South)","1","79.1","16.2 + 4.2","2",4250000,"SF","unit_j.html"],
["J","SPECIAL LOFT","9th ","5","79.1","16.2 + 4.2","2",4400000,"WF","unit_j.html"],
["K","SUPER LOFT","8th ","1","173.9","23.3 + 7.8 + 5.3 + 5","2",9150000,"SF","unit_k.html"],
["K","SUPER LOFT","9th ","1","173.9","23.3 + 7.8 + 5.3 + 5","2",9325000,"WF","unit_k.html"],
["L","SUPER LOFT EX 2","8th ","1","189.3","16.7 + 5.4 + 5.4","2",8750000,"SF","unit_l.html"],
["M","SUPER LOFT EX 2","9th ","1","194","26.6 + 6.9 + 5.3 + 5","2",9575000,"WF","unit_m.html"]
];
$(document).ready(function(){
var scrollTop = 0,
scrollEnterVal = 200,
slidervalroom = 0,
slidervalprice = 0,
valfacing = "SF";
$( document ).scroll(function(e) {
var scrollTop = $(window).scrollTop();
if(scrollTop + scrollEnterVal > advertAtop){
$("#mainimgA").addClass('animatedeffects');
$("#advertA #description").removeClass("hide").addClass('animated fadeInDown');
$("#description img").addClass("animated flipInY")
}
if(scrollTop + scrollEnterVal > advertBtop){
$("#mainimgB").addClass('animatedeffects');
$("#advertB #description").removeClass("hide").addClass('animated fadeInUp');
}
if(scrollTop + scrollEnterVal > advertCtop){
$("#mainimgC").addClass('animatedeffects');
$("#advertC #description").removeClass("hide").addClass('animated fadeInUp');
}
});
function filterPrices(rooms, price, facing){
var roomAlpha = "A";
if(rooms == 0) roomAlpha = "A";
else if(rooms == 1) roomAlpha = "BCD";
else if(rooms == 2) roomAlpha = "EFGHIJ";
else if(rooms == 3) roomAlpha = "KLM";
var filteredroomsarr = pricesarr.filter(function(value){
if(roomAlpha.indexOf(value[0]) > -1) return value;
});
var filteredpricesarr = filteredroomsarr.filter(function(value){
if(value[7] >= price) return value;
});
var filteredfacingarr = filteredpricesarr.filter(function(value){
if(value.indexOf(facing) > -1) return value;
});
buildtable(filteredfacingarr);
}
function buildtable(arr){
var eltable = $("#pricingtable");
var str = "";
for(var i = 0; i < arr.length; i++){
str += "<tr>";
str += "<td>"+arr[i][2]+"</td>";
str += "<td>"+arr[i][0]+"</td>";
str += "<td>"+arr[i][3]+"</td>";
str += "<td>"+arr[i][4]+"</td>";
str += "<td>"+arr[i][5]+"</td>";
str += "<td>"+arr[i][6]+"</td>";
str += "<td>"+currentFormat(arr[i][7])+"</td>";
str += "<td class='text-center'><a href='"+arr[i][9]+"' class='btn btn-default btn-md'>View Property</a></td>";
str += "</tr>";
}
eltable.find("tbody").empty().html(str);
}
function currentFormat(num){
return 'R' + parseFloat(num, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
}
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
$("#slider-rooms").on('change', function(e){
slidervalroom = $(e.currentTarget).val();
$("#pricevalRoom").text("Rooms : " + slidervalroom);
filterPrices(slidervalroom, slidervalprice, valfacing);
});
$("#slider-price").on('change', function(e){
slidervalprice = $(e.currentTarget).val();
$("#pricevalPrice").text("Price : " + currentFormat(slidervalprice));
filterPrices(slidervalroom, slidervalprice, valfacing);
});
$("input[type='radio']").on('change', function(e){
valfacing = $(e.currentTarget).val();
filterPrices(slidervalroom, slidervalprice, valfacing);
});
filterPrices(0, 1600000, "SF");
//google.maps.event.addDomListener(window, 'load', initialize);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="" class="container">
<div id="pricing" class="row">
<div class="col-md-12 pd-lr-lg">
<div class="col-md-6">
<h2 class="pd-tp-md">UNITS</h2>
<p>Kgoro’s first residential project, Kgoro West, offers a mix of 13 designer apartments ranging from superior studio units to luxury super lofts. The units presented below are available for purchase, off-plan, maximising your investment and securing your home in Africa’s premier real estate development. Please use the sliders below to search either Square or West Street facing units against bedroom quantity and price range.</p>
</div>
<div class="col-md-6"> </div>
</div>
<div class="col-md-12 pd-lr-lg">
<div class="row">
<div class="col-md-4">
<strong><p id="pricevalRoom">Rooms : Studio</p></strong>
<div class="pd-tb-md">
<input id="slider-rooms" type="range" min="0" max="3" step="1" value="0" list="steplist" />
<datalist id="steplist">
<option>Studio</option>
<option>1</option>
<option>2</option>
<option>3</option>
</datalist>
</div>
</div>
<div class="col-md-4">
<strong><p id="pricevalPrice">Price : R1,600,000.00 to R3,180,000</p></strong>
<div class="pd-tb-md">
<input id="slider-price" type="range" min="1600000" max="9575000" step="1580000" value="1600000" list="markerticks" />
<datalist id="markerticks">
<option>1600000</option>
<option>3180000</option>
<option>4760000</option>
<option>6340000</option>
<option>7920000</option>
<option>9500000</option>
</datalist>
</div>
</div>
<div class="col-md-4">
<strong><p>Direction Facing</p></strong>
<div class="pd-tb-radio">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="SF" checked> Square
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="WF"> West Street
</label>
</div>
</div>
</div>
<div class="row pd-tp-sm pd-b-md pd-lr-sm">
<table class="table table-striped unit-table" id="pricingtable">
<thead>
<tr>
<th>Floor</th>
<th>Unit Type</th>
<th>Units</th>
<th>Internal (m²)</th>
<th>Balcony (m²)</th>
<th>Parking</th>
<th>Price</th>
<th class="text-center">View Property</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？