я писал нечто похожее
на coffee с возможностью выставить шаг и тд и тп, писал давно, там как то стремно привязано к разметке, но может помочь при составлении (там еще сумма считается и показатели меняются в зависимости от выбранного варианта в двух колонках)
class BriefRow
constructor: (briefRowName, @stepSize, @standartValue, @premiumValue) ->
@name = document.getElementById(briefRowName)
@counter = 0
@plusButton = @name.children[1].children[2]
@displaingValue = @name.children[1].children[1]
@minusButton = @name.children[1].children[0]
@displayStandartValue = @name.children[3]
@displayPremiumValue = @name.children[4]
@logoDiscount = 0
set: ->
@displaingValue.innerText = @stepSize[@counter]
@displayStandartValue.innerText = @standartValue[@counter]
@displayPremiumValue.innerText = @premiumValue[@counter]
add: ->
if @counter < @stepSize.length - 1
@counter++
@set()
minus: ->
if @counter > 0
@counter--
@set()
init: ->
@plusButton.addEventListener('click', =>
@add()
getResult()
)
@minusButton.addEventListener('click', =>
@minus()
getResult()
)
class CheckRow
constructor: (checkRowName, @standartValue, @premiumValue) ->
@name = document.getElementById(checkRowName)
@displayStandartValue = @name.children[3]
@displayPremiumValue = @name.children[4]
check: ->
if @name.children[1].checked
@displayStandartValue.innerText = @standartValue[1]
@displayPremiumValue.innerText = @premiumValue[1]
@logoDiscount = 1
else
@displayStandartValue.innerText = @standartValue[0]
@displayPremiumValue.innerText = @premiumValue[0]
@logoDiscount = 0
getResult()
init: ->
@name.children[1].addEventListener('click', =>
@check()
)
class RadioRow
constructor: (radioRowName, @standartValue, @premiumValue) ->
@name = document.getElementById(radioRowName)
@displayStandartValue = @name.children[3]
@displayPremiumValue = @name.children[4]
check: ->
if @name.children[1].children[0].checked
@displayStandartValue.innerText = @standartValue[0]
@displayPremiumValue.innerText = @premiumValue[0]
else
@displayStandartValue.innerText = @standartValue[1]
@displayPremiumValue.innerText = @premiumValue[1]
getResult()
init: ->
@name.children[1].children[0].addEventListener('click', =>
@check()
)
@name.children[1].children[1].addEventListener('click', =>
@check()
)
getResult = ->
standartResult = document.getElementsByClassName('brief-result-standart')
premiumResult = document.getElementsByClassName('brief-result-premium')
displayStandartResult = document.getElementById('result-standart')
displayPremiumResult = document.getElementById('result-premium')
standartResultValue = 0
premiumResultValue = 0
for res in standartResult
standartResultValue += +res.innerText
for res in premiumResult
premiumResultValue += +res.innerText
if TestCheck.logoDiscount == 1
standartResultValue *= 0.9
premiumResultValue *= 0.9
displayStandartResult.innerText = (Math.floor(standartResultValue / 100) * 100).toLocaleString()
displayPremiumResult.innerText = (Math.floor(premiumResultValue / 100) * 100).toLocaleString()
TestRow = new BriefRow(
'first-row',
[0, 10, 20, 30, 40],
[0, 100, 200, 300, 400],
[0, 200, 400, 600, 800])
TestRow.init()
TestRow2 = new BriefRow(
'second-row',
[0, 50, 100, 150, 200],
[0, 1000, 2000, 3000, 4000],
[0, 2000, 4000, 6000, 8000])
TestRow2.init()
TestCheck = new CheckRow(
'check-1',
[0, 0],
[0, 0])
TestCheck.init()
TestRadio = new RadioRow(
'radio-1',
[3000, 6000],
[3000, 6000])
TestRadio.init()
и в vanila js
(function() {
var BriefRow, CheckRow, RadioRow, TestCheck, TestRadio, TestRow, TestRow2, getResult;
BriefRow = (function() {
function BriefRow(briefRowName, stepSize, standartValue, premiumValue) {
this.stepSize = stepSize;
this.standartValue = standartValue;
this.premiumValue = premiumValue;
this.name = document.getElementById(briefRowName);
this.counter = 0;
this.plusButton = this.name.children[1].children[2];
this.displaingValue = this.name.children[1].children[1];
this.minusButton = this.name.children[1].children[0];
this.displayStandartValue = this.name.children[3];
this.displayPremiumValue = this.name.children[4];
this.logoDiscount = 0;
}
BriefRow.prototype.set = function() {
this.displaingValue.innerText = this.stepSize[this.counter];
this.displayStandartValue.innerText = this.standartValue[this.counter];
return this.displayPremiumValue.innerText = this.premiumValue[this.counter];
};
BriefRow.prototype.add = function() {
if (this.counter < this.stepSize.length - 1) {
this.counter++;
return this.set();
}
};
BriefRow.prototype.minus = function() {
if (this.counter > 0) {
this.counter--;
return this.set();
}
};
BriefRow.prototype.init = function() {
this.plusButton.addEventListener('click', (function(_this) {
return function() {
_this.add();
return getResult();
};
})(this));
return this.minusButton.addEventListener('click', (function(_this) {
return function() {
_this.minus();
return getResult();
};
})(this));
};
return BriefRow;
})();
CheckRow = (function() {
function CheckRow(checkRowName, standartValue, premiumValue) {
this.standartValue = standartValue;
this.premiumValue = premiumValue;
this.name = document.getElementById(checkRowName);
this.displayStandartValue = this.name.children[3];
this.displayPremiumValue = this.name.children[4];
}
CheckRow.prototype.check = function() {
if (this.name.children[1].checked) {
this.displayStandartValue.innerText = this.standartValue[1];
this.displayPremiumValue.innerText = this.premiumValue[1];
this.logoDiscount = 1;
} else {
this.displayStandartValue.innerText = this.standartValue[0];
this.displayPremiumValue.innerText = this.premiumValue[0];
this.logoDiscount = 0;
}
return getResult();
};
CheckRow.prototype.init = function() {
return this.name.children[1].addEventListener('click', (function(_this) {
return function() {
return _this.check();
};
})(this));
};
return CheckRow;
})();
RadioRow = (function() {
function RadioRow(radioRowName, standartValue, premiumValue) {
this.standartValue = standartValue;
this.premiumValue = premiumValue;
this.name = document.getElementById(radioRowName);
this.displayStandartValue = this.name.children[3];
this.displayPremiumValue = this.name.children[4];
}
RadioRow.prototype.check = function() {
if (this.name.children[1].children[0].checked) {
this.displayStandartValue.innerText = this.standartValue[0];
this.displayPremiumValue.innerText = this.premiumValue[0];
} else {
this.displayStandartValue.innerText = this.standartValue[1];
this.displayPremiumValue.innerText = this.premiumValue[1];
}
return getResult();
};
RadioRow.prototype.init = function() {
this.name.children[1].children[0].addEventListener('click', (function(_this) {
return function() {
return _this.check();
};
})(this));
return this.name.children[1].children[1].addEventListener('click', (function(_this) {
return function() {
return _this.check();
};
})(this));
};
return RadioRow;
})();
getResult = function() {
var displayPremiumResult, displayStandartResult, i, j, len, len1, premiumResult, premiumResultValue, res, standartResult, standartResultValue;
standartResult = document.getElementsByClassName('brief-result-standart');
premiumResult = document.getElementsByClassName('brief-result-premium');
displayStandartResult = document.getElementById('result-standart');
displayPremiumResult = document.getElementById('result-premium');
standartResultValue = 0;
premiumResultValue = 0;
for (i = 0, len = standartResult.length; i < len; i++) {
res = standartResult[i];
standartResultValue += +res.innerText;
}
for (j = 0, len1 = premiumResult.length; j < len1; j++) {
res = premiumResult[j];
premiumResultValue += +res.innerText;
}
if (TestCheck.logoDiscount === 1) {
standartResultValue *= 0.9;
premiumResultValue *= 0.9;
}
displayStandartResult.innerText = (Math.floor(standartResultValue / 100) * 100).toLocaleString();
return displayPremiumResult.innerText = (Math.floor(premiumResultValue / 100) * 100).toLocaleString();
};
TestRow = new BriefRow('first-row', [0, 10, 20, 30, 40], [0, 100, 200, 300, 400], [0, 200, 400, 600, 800]);
TestRow.init();
TestRow2 = new BriefRow('second-row', [0, 50, 100, 150, 200], [0, 1000, 2000, 3000, 4000], [0, 2000, 4000, 6000, 8000]);
TestRow2.init();
TestCheck = new CheckRow('check-1', [0, 0], [0, 0]);
TestCheck.init();
TestRadio = new RadioRow('radio-1', [3000, 6000], [3000, 6000]);
TestRadio.init();
}).call(this);
//# sourceMappingURL=brief.js.map
так же был вариант без создания класса, но там все параметры в дата атрибутах указывать надо, если захотите скину
