更新时间:2023-12-05 17:24:04
以下是我向您提出的建议:
Here is what I propose you:
mySlider
变量,以便可以使用该变量访问滑块(未定义按钮使用的变量slider
)class
,并带有自定义属性step
,以便于使用.删除了HTML中的内联样式,并将其放入CSS中.value
而不是values
,因为values
仅应在滑块具有多个值时使用.step
要求mySlider
variable so that the slider is accessible with that variable, (the variable slider
used by your buttons wasn't defined)class
for the buttons, with a custom attribute step
so that it stays easy. Removed inline styling in the HTML, and put it in the CSS.value
instead of values
everywhere, because values
should only be used when your slider got multiple values.step
requirement工作片段:
var mySlider;
function filterPrice(products) {
let minP = $("#price").slider("values", 0);
let maxP = $("#price").slider("values", 1);
return products.filter(function() {
let value = parseInt($(this).data("price"), 10);
return !(value > maxP || value < minP);
});
}
function filterCheckboxes(products) {
checkboxes = $("input:checked").filter(function() {
return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
}).map(function() {
return this.value;
});
// If no checkboxes are checked, don't filter with them
if (checkboxes.length == 0) {
return products;
}
return products.filter(function() {
categories = $(this).data("category").toString().split(" ");
let val = true;
checkboxes.each(function() {
if (!categories.includes(this[0])) {
val = false;
return;
}
});
return val;
});
}
function filterProducts() {
// Reset filters
products = $("#products li");
products.hide();
products = filterPrice(products);
products = filterCheckboxes(products);
products.show();
let numItems = products.length;
if (numItems > 0) {
label = "We found " + numItems + " offers.";
} else {
label = "No results";
}
$("#found").text(label);
}
$(function() {
let options = {
min: 500,
max: 100000,
step: 500,
value: 10000, // TAKIT: Modified
slide: function(event, ui) {
$("#amount").val(ui.value + " zł");
},
change: function(event, ui) {
filterProducts();
}
};
$("input").filter(function() {
return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
}).change(filterProducts);
mySlider = $("#price").slider(options); // Added slider =
$("#amount").val(mySlider.slider("value") + " zł");
});
// TAKIT: Totally modified the below
$('.sliderButtons').click(function() {
var step = +$(this).attr("step"); // Using the custom attribute step from the HTML
mySlider.slider("option", "value", mySlider.slider("value") + step);
$("#amount").val(mySlider.slider("value") + " zł");
});
body {
font-family: 'Arial';
color: #646464;
}
.continents-wrap {
float: left;
width: 20%;
margin: 0 5% 0 0;
padding: 0;
}
.tabela-wrap {
float: left;
width: 50%;
margin: 0 5% 0 0;
padding: 0;
position: relative;
}
.tabela {
float: left;
width: 50%;
}
.tabela div {
float: left;
width: 90%;
height: 68px;
line-height: 68px;
padding: 0 5%;
background: #eee;
margin: 0 0 1px;
position: relative;
}
.number {
font-size: 12px;
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}
.ui-slider-horizontal {
height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
top: -0.5em;
margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.ui-slider-vertical {
width: .8em;
height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
top: 0;
}
.ui-widget-content {
border: 1px solid #aaaaaa;
background: white 50% 50% repeat-x;
color: #222222;
}
.ui-widget {
font-family: Verdana, Arial, sans-serif;
font-size: 1.1em;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
width: 30px;
height: 30px;
border: 3px solid #2F3D44;
border-radius: 20px;
background: white 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}
.slider1Hide {
display: none;
}
/* TAKIT: Added the below */
.sliderButtons {
width: 200px;
height: 30px;
border: 1px solid #ccc;
}
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<span><input type="text" id="amount" readonly ></span>
<div class="slider" id="price"></div>
<div class="sliderButtons" step="500">+ Increase</div>
<div class="sliderButtons" step="-500">- Decrease</div>