Как изменить значение input по клику на кнопки (+/-) и взять значение из имеющейся таблицы если комплектов кнопок и input на странице может быть несколько?
$(function() {
var countInputs = document.getElementsByClassName('count-buttons');
for (var input in countInputs) {
if (!countInputs.hasOwnProperty(input)) {
continue;
}
var butM = input.getElementsByClassName('btn-minus');
var butP = input.getElementsByClassName('btn-plus');
var units = countInput.value.replace(/\d/g, '');
butP.onclick = function() {
countInput.value = parseInt(countInput.value) + 1 + units;
};
butM.onclick = function() {
if (parseInt(countInput.value) > 1) {
countInput.value = parseInt(countInput.value) - 1 + units;
}
};
$(function() {
document.querySelector('.count-buttons').onmouseover = (function() {
document.querySelector('.count-buttons__table').style.display = 'table';
});
document.querySelector('.count-buttons__table').onmouseout = (function() {
document.querySelector('.count-buttons__table').style.display = 'none';
});
var elems = document.querySelectorAll('.count-buttons__table-td');
for (var i = elems.length - 1; i >= 0; i--) {
elems[i].addEventListener('click', myFunc, false);
}
function myFunc() {
document.getElementsByClassName('qty').value = this.innerHTML;
}
});
jsfiddle
UPD
Суть в том, что значения для value можно получить двумя способами:
по нажатию кнопки + или - (соответственно, число либо увеличивается на 1 либо уменьшается) пример выбрать число из выпадающей таблицы (числа никогда не меняются) пример
Ответ
К сожалению, предложенный @dmitryshishkin ответ мне не подошел, т.к. возникала странная ошибка - при клике на кнопки +/- значение увеличивалось/уменьшалось сразу на два числа...
В итоге, мне подошел этот код:
counters = [].slice.call(document.querySelectorAll('.count-buttons'));
counters.forEach(function(counter) {
var input = counter.querySelector('.input-text');
counter.querySelector('.btn-minus').onclick = function () {
var newValue = +input.value - 1;
if (newValue >= 1) {
input.value = newValue;
}
};
counter.querySelector('.btn-plus').onclick = function () {
input.value = +input.value + 1;
};
counter.querySelector('.count-buttons__table').onclick = function (evt) {
input.value = evt.target.textContent;
this.style.display = 'none';
}
});
Комментариев нет:
Отправить комментарий