我在保持滑块同步方面遇到问题。
Sliders preview
如果我在四个滑块之一上+1，那么其他滑块必须减去1/3。
执行此操作的最佳方法是什么？
我已经尝试过Javascript，但无法提供正常工作的代码。选定的滑块确实会改变值，但是其他3个滑块会给出奇怪的数字。
更改其中一个滑块时会调用oninput（）方法。选择滑块并按箭头键更改值时，没有任何反应。在滑块上拖放新值时，也没有任何反应。只有当滑动非常快。 单击滑块上的新值时，它会以某种方式工作..
我在这里做错了什么？
这是整个函数，一些变量是用荷兰语写的...... 代码预览：
function showValueSub(sliderValue, parent, aantalKinderen, totaalbedragCategorie, echteParentId, teller, aantalSiblings, opgeroepenDoorHoofdCategorie) {
/*
het labeltje onder de afbeelding van de hoofdcategorie moet niet meer worden aangepast.
document.getElementById("subcat" + range).innerHTML = newValue + " Euro";
##
Parameters:
parent=het begrotingsId van het huidig element.
echteParentId= het begrotingsId van de parent
##
*/
//alert('test');
//###################################################################################################################################################
//#LOOPEN OVER DE SIBLINGS
//enkel loopen over siblings als deze functie wordt uitgevoerd door huidig element, en niet de parent.
//eerst het outputelement onder de slider aanpassen
var siblingElement = document.getElementById(echteParentId + "input" + teller);
if (siblingElement != null) var siblingSlider = parseInt(siblingElement.getAttribute("onchangeviaparent"));
if (siblingElement != null && siblingSlider != 1) {
//als het niet is opgeroepen door een hoofdcategorie: dan output en input aanpasen van huidig element
var huidigOutputElement = document.getElementById(echteParentId + "output" + teller);
huidigOutputElement.innerText = sliderValue;
var aantalAanpasbareSiblings = 0;
var teVerdelenBedragSiblings = 0;
for (var i = 0; i < aantalSiblings - 1; i++) {
var siblingElement = document.getElementById(echteParentId + "." + i);
//tellen hoeveel kindelementen er zijn die aanpasbaar zijn.
if (siblingElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR")
aantalAanpasbareSiblings++;
}
if (aantalAanpasbareSiblings == 0) aantalAanpasbareSiblings = 1;
if (vorigeSliderValueSibling != null)
teVerdelenBedragSiblings = (sliderValue - vorigeSliderValueSibling) / aantalAanpasbareSiblings; //te verdelen bedrag per aanpasbaar siblingElement
else
teVerdelenBedragSiblings = Math.round(sliderValue / aantalAanpasbareSiblings).toFixed(2); //te verdelen bedrag per aanpasbaar siblingElement
for (var i = 0; i < aantalSiblings; i++) {
//het huidig subelement mag niet aangepast worden, checken met een if.
var siblingElement = document.getElementById(echteParentId + "." + i);
if (siblingElement != document.getElementById(echteParentId + "." + teller)) {
if (siblingElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR") {
//in het p element staat een bedrag + de string "EURO".
//eigen p element ophalen
var siblingElementMetBedrag = document.getElementById(echteParentId + "." + i + "p");
var bedrag = parseFloat(siblingElementMetBedrag.innerHTML.substring(0, siblingElementMetBedrag.innerHTML.length - 5).trim());
bedrag -= teVerdelenBedragSiblings; //aftrekken ipv optellen
siblingElementMetBedrag.innerHTML = Math.round(bedrag).toFixed(2) + " Euro";
//siblinginput(slider) element ophalen en proberen aan te passen
var siblingSliderElement = document.getElementById(echteParentId + "input" + i);
if (siblingSliderElement != null) siblingSliderElement.value = Math.round(siblingSliderElement.value - teVerdelenBedragSiblings).toFixed(2);
//output van sibling aanpassen
var siblingSliderOutput =document.getElementById(echteParentId + "output" + i);
if (siblingSliderOutput != null)
siblingSliderOutput.value = Math.round(siblingSliderOutput.value - teVerdelenBedragSiblings).toFixed(2);
}
}
}
}
vorigeSliderValueSibling = sliderValue;
//###################################################################################################################################################
//#LOPEN OVER DE KINDEREN.
var aantalAanpasbareKinderen = 0;
for (var i = 0; i < aantalKinderen; i++) {
var kindElement = document.getElementById(parent + "." + i);
//tellen hoeveel kindelementen er zijn die aanpasbaar zijn.
if (kindElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR")
aantalAanpasbareKinderen++;
}
//als er geen aanpasbarekinderen gevonden zijn, deze standaard op 1 zetten want
//delen door 0 gaat niet.
if (aantalAanpasbareKinderen == 0) aantalAanpasbareKinderen = 1;
//checken of de slider al een keer is aangepast, zo ja huidig bedrag van de slider verminderen met vorige waarde van de slider
if (vorigeSliderValueSub != null)
teVerdelenBedrag = (sliderValue - vorigeSliderValueSub) / aantalAanpasbareKinderen; //te verdelen bedrag per aanpasbaar kindElement
else
teVerdelenBedrag = Math.round(sliderValue / aantalAanpasbareKinderen).toFixed(2); //te verdelen bedrag per aanpasbaar kindElement
for (var i = 0; i < aantalKinderen; i++) {
var kindElement = document.getElementById(parent + "." + i);
if (kindElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR") {
//in het p element staat een bedrag + de string "EURO".
//eigen p element ophalen
var kindElementMetBedrag = document.getElementById(parent + "." + i + "p");
var bedrag = parseFloat(kindElementMetBedrag.innerHTML.substring(0, kindElementMetBedrag.innerHTML.length - 5).trim());
bedrag += teVerdelenBedrag;
kindElementMetBedrag.innerHTML = bedrag + " Euro";
//kindinput element ophalen en proberen aan te passen
var kindSliderElement = document.getElementById(parent + "input" + i);
if (kindSliderElement != null) kindSliderElement.value = sliderValue / aantalAanpasbareKinderen;
}
}
//###################################################################################################################################################
vorigeSliderValueSub = sliderValue;
//alert(siblingSlider.innerHTML);
if (siblingSlider != null) {
$("#" + echteParentId + "input" + teller).attr('onchangeviaparent', '0');
//siblingSlider.onchangeviaparent = '0';
//alert(parseInt(siblingSlider.getAttribute("onchangeviaparent")));
}
//document.getElementById(echteParentId + "." + teller).setAttribute("onchangeViaParent", "0");
//alert(document.getElementById(echteParentId + "input" + teller).getAttribute("onchangeViaParent"));
}