我正在开发一个网站,我试图在其中实现价格滑块。我正在使用Perch CMS和Creative Tim Material Kit。
来自Creative Tim Kit我有以下模板:
// With help from Javascript the price-left and price-right values get displayed on the website:
$(document).ready(function() {
var slider2 = document.getElementById('sliderRefine');
noUiSlider.create(slider2, {
start: [101, 790],
connect: true,
range: {
'min': [30],
'max': [900]
}
});
var limitFieldMin = document.getElementById('price-left');
var limitFieldMax = document.getElementById('price-right');
slider2.noUiSlider.on('update', function(values, handle) {
if (handle) {
limitFieldMax.innerHTML = $('#price-right').data('currency') + Math.round(values[handle]);
} else {
limitFieldMin.innerHTML = $('#price-left').data('currency') + Math.round(values[handle]);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.css" />
<div class="card-body card-refine">
<span id="price-left" class="price-left pull-left" data-currency="€"></span>
<span id="price-right" class="price-right pull-right" data-currency="€"></span>
<div class="clearfix"></div>
<div id="sliderRefine" class="slider slider-rose noUi-target noUi-ltr noUi-horizontal"></div>
</div>
现在使用PHP我得到$ min_price和$ max_price。
// ---------- PRICES
if(perch_get('price')) {
$price = perch_get('price');
// if numeric, we have one number (?price=minPrice)
if(is_numeric($price)) {
// filter for greater or equal to
$filters[] = [
'filter' => 'price',
'match' => 'gte',
'value' => $price,
];
PerchSystem::set_var('selected_price', $price);
} elseif(substr_count($price, '-') == 1) {
// we have a signle hyphen (hopefully ?price=minPrice-maxPrice)
// split
$prices = explode('-', $price);
// check both are numeric
if(is_numeric($prices[0]) && is_numeric($prices[1])) {
$min_price = $prices[0];
$max_price = $prices[1];
// filter for items between min and max inclusively
$filters[] = [
'filter' => 'price',
'match' => 'eqbetween',
'value' => $min_price . ',' . $max_price,
];
PerchSystem::set_var('selected_price', $min_price . '-' . $max_price);
}
}
}
所以现在我试图从Javascript脚本中获取'var limitFieldMin'和'var limitFieldMax',放在PHP中的$ min_price和$ max_price中。
有人能教我怎么做吗?