我有多个滑块和一些值。我想把它结合起来，但还是有些不对劲。
$(document).on("ready", function() {
var number = $("input[name='number']").val();
initSlider($(".slider-container"), number);
});
$(document).on("blur", "input[name='number']", function() {
var number = $(this).val();
initSlider($(".slider-container"), number);
});
$(document).on("click", ".add-more", function() {
var number = $("input[name='number']").val();
var html = '<div class="slider-item"><div class="result">Result: <span class="value">2</span></div><div class="slider-range"></div></div>';
$(".slider-list").append(html);
initSlider($(".slider-container"), number);
});
function parseNumber(number) {
var response = [];
for(var i = 0; i <= number; i++) {
response.push(i);
}
return response;
}
function initRange(prev_values, current_values, next_values, number, remain_number) {
number = parseInt(number);
var return_values = [0, 0];
var arrange = (100 / (number + 1));
if($.isArray(current_values)) {
if(prev_values[0] > 1) {
if($.isArray(prev_values)) {
prev_values = [Math.round(prev_values[0]), Math.round(prev_values[1])];
next_values = [Math.round(next_values[0]), Math.round(next_values[1])];
current_values = [Math.round(current_values[0]), Math.round(current_values[1])];
return_values[0] = Math.round(current_values[0] / arrange);
return_values[1] = Math.round(next_values[0] / arrange) - 1;
console.log(prev_values);
}
}
else {
prev_values = [Math.round(prev_values[0]), Math.round(prev_values[1])];
next_values = [Math.round(next_values[0]), Math.round(next_values[1])];
if(Math.round((prev_values[1] + 1) / arrange) > 0) {
return_values[0] = Math.floor((prev_values[1] - 1) / arrange) + 1;
} else {
return_values[0] = 0;
}
return_values[1] = Math.round(next_values[0] / arrange) - 1;
}
}
else {
current_values = Math.round(current_values);
if(prev_values == 1) {
prev_values = Math.round(prev_values);
next_values = [Math.round(next_values[0]), Math.round(next_values[1])];
return_values[0] = 0;
return_values[1] = Math.floor((current_values - 1) / arrange);
if(return_values[1] == Math.round(next_values[0] / arrange) && !$.isArray(next_values)) {
return_values[1] -= 1;
}
if($.isArray(next_values) && Math.round((current_values + 1) / arrange) == 0) {
return_values[1] = -1;
}
}
else {
next_values = Math.round(next_values);
prev_values = [Math.round(prev_values[0]), Math.round(prev_values[1])];
return_values[0] = Math.round(current_values / arrange);
return_values[1] = Math.round((100 - current_values) / arrange) > 0 ? number : ((number - current_values) > 0 ? (number - current_values) : 0);
}
}
if((return_values[0] == 'NA') || (return_values[1] == 'NA') || (return_values[0] > return_values[1])) {
return_values = ['NA', 'NA'];
}
return return_values;
}
function initSlider(selector, number) {
var slider_list = selector.find(".slider-list .slider-item");
var slider_count = slider_list.size();
var slider_values = [1, 100 / slider_count];
var parse_number = parseNumber(number);
var slides = [];
var ranger_values;
var prev_values;
var next_values;
var count = 0;
$.each(slider_list, function() {
var th = $(this).find(".slider-range");
slides[count] = th[0];
if(th.hasClass("noUi-target")) {
slides[count].noUiSlider.destroy();
}
if($(this).is(":first-child")) {
noUiSlider.create(slides[count], {
start : slider_values[1],
connect : "lower",
tooltips: true,
range : {
min: 1,
max: 100
},
format : wNumb({
decimals: 0
})
});
th.addClass("first");
ranger_values = initRange(1, slider_values[1], [(slider_values[1] + 1), slider_values[1] + (slider_values[1] - slider_values[0] + 1)], number, 0);
th.parent().find(".result .value").html(ranger_values.join("-"));
th.attr('data-from',ranger_values[0]).attr('data-to',ranger_values[1]);
slides[count].noUiSlider.on("change", function(values, handle) {
changeSlider(th, slides[count], values[handle]);
});
slides[count].noUiSlider.on("update", function(values, handle) {
ranger_values = initRange(1, parseInt(values[handle]), [(parseInt(values[handle]) + 1), parseInt(values[handle]) + (parseInt(values[handle]) - slider_values[0] + 1)], number, parse_number);
th.parent().find(".result .value").html(ranger_values.join("-"));
th.attr('data-from',ranger_values[0]).attr('data-to',ranger_values[1]);
});
} else if($(this).is(":last-child")) {
noUiSlider.create(slides[count], {
start : slider_values[0],
connect : "upper",
tooltips: true,
range : {
min: 1,
max: 100
},
format : wNumb({
decimals: 0
})
});
th.removeClass("middle").addClass("last");
ranger_values = initRange([slider_values[0] - (slider_values[1] - slider_values[0]) - 1, (slider_values[0] - 1)], slider_values[0], 100, number, 0);
th.parent().find(".result .value").html(ranger_values.join("-"));
th.attr('data-from',ranger_values[0]).attr('data-to',ranger_values[1]);
slides[count].noUiSlider.on("change", function(values, handle) {
changeSlider(th, slides[count], values[handle]);
});
slides[count].noUiSlider.on("update", function(values, handle) {
ranger_values = initRange([values[handle] - (slider_values[1] - values[handle]) - 1, (values[handle] - 1)], values[handle], 100, number);
th.parent().find(".result .value").html(ranger_values.join("-"));
th.attr('data-from',ranger_values[0]).attr('data-to',ranger_values[1]);
});
} else {
noUiSlider.create(slides[count], {
start : slider_values,
connect : true,
tooltips: true,
range : {
min: 1,
max: 100
},
format : wNumb({
decimals: 0
})
});
th.removeClass("last").addClass("middle");
prev_values = [slider_values[0] - (slider_values[1] - slider_values[0]) - 1, (slider_values[0] - 1)];
next_values = [(slider_values[1] + 1), slider_values[1] + (slider_values[1] - slider_values[0] + 1)];
ranger_values = initRange(prev_values, slider_values, next_values, number, 0);
th.parent().find(".result .value").html(ranger_values.join("-"));
th.attr('data-from',ranger_values[0]).attr('data-to',ranger_values[1]);
slides[count].noUiSlider.on("change", function(values) {
changeSlider(th, slides[count], values);
});
slides[count].noUiSlider.on("update", function(values) {
values = [parseInt(values[0]), parseInt(values[1])];
if(count <= 2) {
prev_values = [0, (values[0] - 1)];
} else {
prev_values = [values[0] - (values[1] - values[0]) - count * 2, (values[0] - 1)];
}
next_values = [(values[1] + 1), values[1] + (values[1] - values[0] + 1)];
ranger_values = initRange(prev_values, values, next_values, number);
th.parent().find(".result .value").html(ranger_values.join("-"));
th.attr('data-from',ranger_values[0]).attr('data-to',ranger_values[1]);
});
}
slider_values = [(slider_values[1] + 1), slider_values[1] + (slider_values[1] - slider_values[0]) + 1];
count++;
});
}
function changeSlider(object, slide, values) {
var old_values;
var next_slide = object.parent().next().find(".slider-range");
var prev_slide = object.parent().prev().find(".slider-range");
if($.isArray(values)) {
values = [parseInt(values[0]), parseInt(values[1])];
} else {
values = parseInt(values);
}
if(next_slide.hasClass("noUi-target")) {
var current_next_values = next_slide[0].noUiSlider.get();
if($.isArray(current_next_values) && current_next_values.length == 2) {
current_next_values = [parseInt(current_next_values[0]), parseInt(current_next_values[1])];
if($.isArray(values)) {
if(values[1] > current_next_values[1]) {
old_values = values;
old_values[1] = current_next_values[1] - 1;
slide.noUiSlider.set(old_values);
}
current_next_values[0] = values[1] + 1;
} else {
if(values >= current_next_values[1]) {
old_values = current_next_values[1] - 1;
slide.noUiSlider.set(old_values);
}
current_next_values[0] = values + 1;
}
} else {
current_next_values = parseInt(current_next_values);
if($.isArray(values)) {
current_next_values = values[1] + 1;
} else {
current_next_values = values + 1;
}
}
next_slide[0].noUiSlider.set(current_next_values);
}
if(prev_slide.hasClass("noUi-target")) {
var current_prev_values = prev_slide[0].noUiSlider.get();
if($.isArray(current_prev_values) && current_prev_values.length == 2) {
current_prev_values = [parseInt(current_prev_values[0]), parseInt(current_prev_values[1])];
if($.isArray(values)) {
if(values[0] < current_prev_values[0]) {
old_values = values;
old_values[0] = current_prev_values[0] + 1;
slide.noUiSlider.set(old_values);
}
current_prev_values[1] = values[0] - 1;
} else {
if(values <= current_prev_values[0]) {
old_values = current_prev_values[0] + 1;
slide.noUiSlider.set(old_values);
}
current_prev_values[1] = values - 1;
}
} else {
current_prev_values = parseInt(current_prev_values);
if($.isArray(values)) {
current_prev_values = values[0] - 1;
} else {
current_prev_values = values - 1;
}
}
prev_slide[0].noUiSlider.set(current_prev_values);
}
} .slider-container {
width: 500px;
margin-top: 20px;
}
.slider-item {
margin-bottom: 50px;
}
.result span {
font-weight: bold;
}
.noUi-handle-lower .noUi-tooltip {
top: 28px !important;
bottom: -32px !important;
}<link href="http://refreshless.com/noUiSlider/distribute/nouislider.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://refreshless.com/noUiSlider/distribute/nouislider.js"></script>
<script type="text/javascript" src="http://refreshless.com/nouislider/documentation/assets/wNumb.js"></script>
<div style="top:40px;left:40px;position: absolute;">
Number: <input title="" type="number" min="2" name="number" value="4"><br>
Array: <span class="array">[0,1,2,3,4]</span>
<br>
<div class="slider-container">
<div class="slider-list">
<div class="slider-item">
<div class="result">Result: <span class="value">2</span></div>
<div class="slider-range"></div>
</div>
<div class="slider-item">
<div class="result">Result: <span class="value">2</span></div>
<div class="slider-range"></div>
</div>
<div class="slider-item">
<div class="result">Result: <span class="value">2</span></div>
<div class="slider-range"></div>
</div>
<div class="slider-item">
<div class="result">Result: <span class="value">2</span></div>
<div class="slider-range"></div>
</div>
</div>
<div>
<button type="button" class="add-more">Add More slide</button>
</div>
</div>
</div>
答案 0 :(得分：0)
抱歉，我在幻灯片事件后重新启动了解决自己。
$(document).on("ready", function() {
var number = $("input[name='number']").val();
initSlider($(".slider-container"), number);
});
$(document).on("blur", "input[name='number']", function() {
var number = $(this).val();
var list = [];
for(var i = 0; i <= number; i++) {
list.push(i);
}
$(this).parent().find("span.array").html('[' + list.join(',') + ']');
initSlider($(".slider-container"), number);
});
$(document).on("click", ".add-more", function() {
var number = $("input[name='number']").val();
var count = $(".slider-item").size();
var html = '<div class="slider-item"><div class="result">Range: <span class="value">2</span></div><div class="slider-range" data-id="' + count + '"></div></div>';
$(".slider-list").append(html);
initSlider($(".slider-container"), number);
});
function spliceNumber(numbers, range_value) {
for(var i = numbers.length - 1; i >= 0; i--) {
for(var j = range_value.length - 1; j >= 0; j--) {
if(numbers[i] == range_value[j]) {
numbers.splice(i, 1);
}
}
}
return numbers;
}
function roundNumber(values, remain_number) {
var ranger = [];
var response = [];
values = [Math.floor(values[0]), Math.floor(values[1])];
for(var i = 0; i < remain_number.length; i++) {
for(var j = values[0]; j <= values[1]; j++) {
if(j == remain_number[i]) {
ranger.push(j);
}
}
}
switch(ranger.length) {
case 0:
response.push('NA');
break;
case 1:
response = ranger;
break;
default:
response[0] = ranger[0];
response[1] = ranger[ranger.length - 1];
break;
}
return response;
}
function initSlider(selector, number, ranger_list) {
number = parseFloat(number);
var slider_list = selector.find(".slider-list .slider-item");
var slider_count = slider_list.size();
var step = (number) / 100;
var slider_values = [0, (number) / slider_count];
var numbers = [];
var rangers = [];
if(!$.isArray(ranger_list) || ranger_list.length == 0) {
ranger_list = [];
}
for(var i = 0; i <= number; i++) {
numbers.push(i);
}
$.each(slider_list, function() {
var th = $(this).find(".slider-range");
var id = parseInt(th.attr('data-id'));
var slide = th[0];
var start;
if(th.hasClass("noUi-target")) {
slide.noUiSlider.destroy();
}
if($(this).is(":first-child")) {
start = ranger_list[id] || slider_values[1];
if(ranger_list[id] == 0) {
start = 0;
}
noUiSlider.create(slide, {
start : start,
step : step,
connect : "lower",
tooltips: true,
range : {
min: 0,
max: number
}
});
rangers = roundNumber([0, slide.noUiSlider.get()], numbers);
numbers = spliceNumber(numbers, rangers);
th.addClass("first");
th.parent().find(".result .value").html(rangers.join("-"));
th.attr('data-from', rangers[0]).attr('data-to', rangers[1]);
slide.noUiSlider.on("update", function(values, handle) {
th.find('.noUi-tooltip').html(Math.round(values[handle] / step));
ranger_list[id] = parseFloat(values[handle]);
});
slide.noUiSlider.on("change", function(values, handle) {
changeSlider(th, slide, values[handle], step);
initSlider(selector, number, ranger_list);
});
} else if($(this).is(":last-child")) {
start = ranger_list[id] || slider_values[0];
noUiSlider.create(slide, {
start : start,
step : step,
connect : "upper",
tooltips: true,
range : {
min: 0,
max: number
}
});
rangers = roundNumber([slide.noUiSlider.get(), number], numbers);
numbers = spliceNumber(numbers, rangers);
th.removeClass("middle").addClass("last");
th.parent().find(".result .value").html(rangers.join("-"));
th.attr('data-from', rangers[0]).attr('data-to', rangers[1]);
slide.noUiSlider.on("update", function(values, handle) {
th.find('.noUi-tooltip').html(Math.round(values[handle] / step));
ranger_list[id] = parseFloat(values[handle]);
});
slide.noUiSlider.on("change", function(values, handle) {
changeSlider(th, slide, values[handle], step);
initSlider(selector, number, ranger_list);
});
} else {
start = ranger_list[id] || slider_values;
noUiSlider.create(slide, {
start : start,
step : step,
connect : true,
tooltips: true,
range : {
min: 0,
max: number
}
});
rangers = roundNumber(slide.noUiSlider.get(), numbers);
numbers = spliceNumber(numbers, rangers);
th.removeClass("last").addClass("middle");
th.parent().find(".result .value").html(rangers.join("-"));
th.attr('data-from', rangers[0]).attr('data-to', rangers[1]);
slide.noUiSlider.on("update", function(values) {
th.find('.noUi-tooltip:first').html(Math.round(values[0] / step));
th.find('.noUi-tooltip:last').html(Math.round(values[1] / step));
ranger_list[id] = [parseFloat(values[0]), parseFloat(values[1])];
});
slide.noUiSlider.on("change", function(values) {
changeSlider(th, slide, values, step);
initSlider(selector, number, ranger_list);
});
}
slider_values = [(slider_values[1] + step), slider_values[1] + (slider_values[1] - slider_values[0]) + step];
});
}
function changeSlider(object, slide, values, step) {
var old_values;
var next_slide = object.parent().next().find(".slider-range");
var prev_slide = object.parent().prev().find(".slider-range");
if($.isArray(values)) {
values = [parseFloat(values[0]), parseFloat(values[1])];
} else {
values = parseFloat(values);
}
if(next_slide.hasClass("noUi-target")) {
var current_next_values = next_slide[0].noUiSlider.get();
if($.isArray(current_next_values) && current_next_values.length == 2) {
current_next_values = [parseFloat(current_next_values[0]), parseFloat(current_next_values[1])];
if($.isArray(values)) {
if(values[1] > current_next_values[1]) {
old_values = values;
old_values[1] = current_next_values[1] - step;
slide.noUiSlider.set(old_values);
}
current_next_values[0] = values[1] + step;
} else {
if(values >= current_next_values[1]) {
old_values = current_next_values[1] - step;
slide.noUiSlider.set(old_values);
}
current_next_values[0] = values + step;
}
} else {
current_next_values = parseFloat(current_next_values);
if($.isArray(values)) {
current_next_values = values[1] + step;
if(values[1] == (step * 100)) {
values[1] -= step;
slide.noUiSlider.set(values);
}
} else {
current_next_values = values + step;
if(values == (step * 100)) {
values -= step;
slide.noUiSlider.set(values);
}
}
}
next_slide[0].noUiSlider.set(current_next_values);
}
if(prev_slide.hasClass("noUi-target")) {
var current_prev_values = prev_slide[0].noUiSlider.get();
if($.isArray(current_prev_values) && current_prev_values.length == 2) {
current_prev_values = [parseFloat(current_prev_values[0]), parseFloat(current_prev_values[1])];
if($.isArray(values)) {
if(values[0] < current_prev_values[0]) {
old_values = values;
old_values[0] = current_prev_values[0] + step;
slide.noUiSlider.set(old_values);
}
current_prev_values[1] = values[0] - step;
} else {
if(values <= current_prev_values[0]) {
old_values = current_prev_values[0] + step;
slide.noUiSlider.set(old_values);
}
current_prev_values[1] = values - step;
}
} else {
current_prev_values = parseFloat(current_prev_values);
if($.isArray(values)) {
current_prev_values = values[0] - step;
if(values[0] == 0) {
values[0] += step;
slide.noUiSlider.set(values);
current_prev_values = 0;
}
} else {
current_prev_values = values - step;
if(values == 0) {
values += step;
slide.noUiSlider.set(values);
current_prev_values = 0;
}
}
}
prev_slide[0].noUiSlider.set(current_prev_values);
}
} .slider-container {
width: 500px;
margin-top: 20px;
}
.slider-item {
margin-bottom: 50px;
}
.result span {
font-weight: bold;
}
.noUi-handle-lower .noUi-tooltip {
top: 28px !important;
bottom: -32px !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://refreshless.com/noUiSlider/distribute/nouislider.min.css" rel="stylesheet">
<script type="text/javascript" src="http://refreshless.com/noUiSlider/distribute/nouislider.js"></script>
<div style="top:40px;left:40px;position: absolute;">
Number: <input title="" type="number" min="2" name="number" value="2"><br>
Array: <span class="array">[0,1,2]</span>
<br>
<div class="slider-container">
<div class="slider-list">
<div class="slider-item">
<div class="result">Result: <span class="value">2</span></div>
<div class="slider-range" data-id="0"></div>
</div>
<div class="slider-item">
<div class="result">Result: <span class="value">2</span></div>
<div class="slider-range" data-id="1"></div>
</div>
</div>
<div>
<button type="button" class="add-more">Add More slide</button>
</div>
</div>
</div>