Увеличить/уменишить число при клике на кнопку
Добрый день! Я не давно на этом форуме и вообще в JS, по этому сразу попрошу не бросаться тапками если вопрос покажется слишком простым:)
У меня есть блок - количество товара в корзине, вот его разметка:
<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs number-update">
<h2>
<span id="number-prev" class="number-actual" onClick="numberPrev()">- </span>
<span id="valueNumber">2</span>
<span id="number-next" class="number-actual" onClick="numberNext()"> +</span>
</h2>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs number-update">
<!-- Далее такие же блоки в n-ом количестве -->
</div>
Как вы уже догадались мне нужно что бы при нажатии на + или - количество либо увеличивалось либо уменьшалось. Я хочу реализовать это с помощью 2 соответствующих функций, вот их начало:
function numberPrev(){
$('.number-update').click(function(){
var numberValue = $(this).find("#valueNumber").text();
console.log(numberValue);
})
}
function numberNext(){
$('.number-update').click(function(){
var numberValue = $(this).find("#valueNumber").text();
console.log(numberValue);
})
}
Сейчас, проблема в том что я не могу "по человечески" обратиться к значению которое содержится в span у которого #valueNumber - это и есть количество. Проблема следующего характера, при выполнении этих функции, значение из "valueNumber" берется не 1 раз, а трижды, то есть из-за того что в функции присутствует:
"$('.number-update').click(function()"
Она выводит по значению с каждой функции, а потом только (третьим номером), то значение которое мне и правда нужно. Вообще я понимаю что вся загвоздка в:
"$('.number-update').click(function()"
Но как ее заменить для того что бы смело использовать "$(this)", я не могу разобраться уже второй день. Заранее благодарен за любую помощь |
Цитата:
|
Цитата:
А ведь ИД должен быть уникальным на странице. :nono: Т.ч. самое время начать использовать атрибут class. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.number-actual {
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function (){
$('.number-prev').click(function (){
inc(this.parentNode,-1);
});
$('.number-next').click(function (){
inc(this.parentNode,1);
});
function inc(Obj,Val){
Obj=$(Obj).find('.valueNumber');
var val=parseInt(Obj.text());
if (val==0 && Val==-1) {
return;
};
Obj.text(val+Val);
};
});
</script>
</head>
<body>
<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs number-update">
<h2>
<span class="number-actual number-prev">- </span>
<span class="valueNumber">2</span>
<span class="number-actual number-next"> +</span>
</h2>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs number-update">
<h2>
<span class="number-actual number-prev">- </span>
<span class="valueNumber">2</span>
<span class="number-actual number-next"> +</span>
</h2>
</div>
</body>
</html>
|
То что нужно! Огромное спасибо!
Но есть другая проблема, почти мистическая. Внутри блока корзины "$('.number-prev').click(function ()", не работает, такое ощущение что кнопки + и - просто неактивны, хотя это не так. Вынес свою разметку за корзину, просто на страницу, все заработало. Не могу понять в чем причина. Могли бы помочь? Может есть какой-то запрос для отладки который покажет что именно в корзине блокирует "$('.number-prev').click(function ()" |
Цитата:
Они еще не подгружены. |
Цитата:
$(function (){
alert('prev - '+$('.number-prev').length);
alert('next - '+$('.number-next').length);
$('.number-prev').click(function (){
inc(this.parentNode,-1);
});
$('.number-next').click(function (){
inc(this.parentNode,1);
});
function inc(Obj,Val){
Obj=$(Obj).find('.valueNumber');
var val=parseInt(Obj.text());
if (val==0 && Val==-1) {
return;
};
Obj.text(val+Val);
};
});
Смотри чего покажет... |
Вы гений. Действительно в момент загрузки скрипта, элементов на странице просто не существует. Возможно это как-то обойти?
|
Цитата:
https://habrahabr.ru/post/70760/ https://learn.javascript.ru/event-delegation |
ksa, добрый день, я прошу прощения, но я практически нечего не понял из статей которые вы прислали. Вернее даже не так, я перечитал их огромное количество раз, понял зачем нужно делегирование, но не понял как оно применимо к моему случаю:(
Если Вас не затруднить пожалуйста, помогите разобраться новичку |
| Часовой пояс GMT +3, время: 15:39. |