Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.11.2016, 13:29
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Увеличить/уменишить число при клике на кнопку
Добрый день! Я не давно на этом форуме и вообще в 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)", я не могу разобраться уже второй день.

Заранее благодарен за любую помощь
Ответить с цитированием
  #2 (permalink)  
Старый 21.11.2016, 13:37
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от smart-create
Я хочу реализовать это с помощью 2 соответствующих функций
Нужно использовать одну функцию, но с параметром...
Ответить с цитированием
  #3 (permalink)  
Старый 21.11.2016, 13:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от smart-create
Далее такие же блоки в n-ом количестве
У тебя все однотипные элементы имеют одинаковый ИД?
А ведь ИД должен быть уникальным на странице.
Т.ч. самое время начать использовать атрибут class.
Ответить с цитированием
  #4 (permalink)  
Старый 21.11.2016, 13:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от smart-create
Но как ее заменить для того что бы смело использовать "$(this)", я не могу разобраться уже второй день.
Как вариант...

<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 21.11.2016, 14:30
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

То что нужно! Огромное спасибо!

Но есть другая проблема, почти мистическая. Внутри блока корзины "$('.number-prev').click(function ()", не работает, такое ощущение что кнопки + и - просто неактивны, хотя это не так.

Вынес свою разметку за корзину, просто на страницу, все заработало. Не могу понять в чем причина. Могли бы помочь? Может есть какой-то запрос для отладки который покажет что именно в корзине блокирует "$('.number-prev').click(function ()"
Ответить с цитированием
  #6 (permalink)  
Старый 21.11.2016, 14:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от smart-create
Не могу понять в чем причина.
Так может на момент навешивания событий этих элементов просто нет на странице...
Они еще не подгружены.
Ответить с цитированием
  #7 (permalink)  
Старый 21.11.2016, 14:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от smart-create
Может есть какой-то запрос для отладки который покажет что именно в корзине блокирует "$('.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);
	};
});

Смотри чего покажет...
Ответить с цитированием
  #8 (permalink)  
Старый 21.11.2016, 15:24
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Вы гений. Действительно в момент загрузки скрипта, элементов на странице просто не существует. Возможно это как-то обойти?
Ответить с цитированием
  #9 (permalink)  
Старый 21.11.2016, 16:40
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от smart-create
Возможно это как-то обойти?
Нужно использовать "делегирование"
https://habrahabr.ru/post/70760/
https://learn.javascript.ru/event-delegation
Ответить с цитированием
  #10 (permalink)  
Старый 22.11.2016, 14:43
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

ksa, добрый день, я прошу прощения, но я практически нечего не понял из статей которые вы прислали. Вернее даже не так, я перечитал их огромное количество раз, понял зачем нужно делегирование, но не понял как оно применимо к моему случаю

Если Вас не затруднить пожалуйста, помогите разобраться новичку
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Fancybox при клике на метку Яндекс.Карт не работает с параметрами imax57 jQuery 0 04.10.2014 09:18
Как взять элементы по классу и изменить им свойство в цсс при клике на кнопку? Webtest Элементы интерфейса 2 08.09.2014 12:09
скрыть открыть тот или иной блок при клике на ссылке ufaclub jQuery 7 26.08.2014 00:14
При клике на ссылку ничего не происходит gurg0n Элементы интерфейса 2 24.06.2013 11:11
Запись cookes при клике pavdin Общие вопросы Javascript 3 06.02.2012 17:19