Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > JavaScript
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.74/34: Рейтинг темы: голосов - 34, средняя оценка - 4.74
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
1

Счетчик количества товаров. Внедрение на сайт. Наведите на правильную мысль

01.09.2017, 03:01. Показов 6353. Ответов 10
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Вот тестовый сайт моего интернет магазина http://1.tdprofnastil.ru/catal... ry/fanera/

Сделал счетчик товаров.

Но при нажатии "+" или "-"(на счетчике), то количество увеличивается/уменьшается у всех товаров.

Наведите на правильную мысль.

HTML5
1
2
3
4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

var $btnInc = $('.inc')
  ,$btnDec = $('.dec')
  ,$out = $('.amount')
  ,v = $out.val()
  ,maxDelay = 300
  ,delay = maxDelay
  ,minDelay = 800
  ,start
  ,action
;
 
function update(timestamp) {
  if(!start) start = timestamp;
  if(action  &&  (timestamp - start) >= delay) {
    start = timestamp;
    if( delay > minDelay  &&  (delay -= 100) <= minDelay) delay = minDelay;
    switch(action){
      case "inc": v++; break;
      case "dec": if (v>1) v--; break;
    }
    $out.val(v);
  }
  window.requestAnimationFrame(update);
}
 
$btnInc.on('mousedown', incOn);
$btnInc.on('mouseup mouseout', incdecOff);
$btnDec.on('mousedown', decOn);
$btnDec.on('mouseup mouseout', incdecOff);
$out.on('input', function(){ v = $out.val(); });
 
function incOn(){ action = "inc";}
function incdecOff(){action = undefined; delay = maxDelay;}
function decOn(){ action = "dec";}
  
window.requestAnimationFrame(update);
0
Лучшие ответы (1)
Сообщение: #10724644
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 01.09.2017, 03:01
Ответы с готовыми решениями:

Наведите на мысль
Добрый день) Изучаю Borland C++ по А. Крейгу, надо ввести данную программу(приведена ниже), после...

Наведите на мысль решения задачи по массивам
Есть массив Objects. Задание - написать к нему различные методы (что нужно - под названием метода)....

Счетчик количества товаров. Отрицательные значения
Не приходит в голову, как сделать, чтоб значения imput не уходили к отрицательным цифрам. ...

Импорт товаров из прайса онлайн на сайт или Выгрузка товаров на сайт
:geek: Всем привет, с платформой знаком недавно и потихоньку в процессе создания сайта обучаю по...

10
671 / 217 / 88
Регистрация: 21.07.2016
Сообщений: 1,036
Записей в блоге: 2
01.09.2017, 07:10 2
Цитата Сообщение от Leonardo65 Посмотреть сообщение
Но при нажатии "+" или "-"(на счетчике), то количество увеличивается/уменьшается у всех товаров.
вполне логично же

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

var $btnInc = $('.inc')
  ,$btnDec = $('.dec')
  ,$out = $('.amount')
  ,v = $out.val()
  ,maxDelay = 300
  ,delay = maxDelay
  ,minDelay = 800
  ,start
  ,action
;
 
function update(timestamp) {
  if(!start) start = timestamp;
  if(action  &&  (timestamp - start) >= delay) {
    start = timestamp;
    if( delay > minDelay  &&  (delay -= 100) <= minDelay) delay = minDelay;
    switch(action){
      case "inc": v++; break;
      case "dec": if (v>1) v--; break;
    }
    $(this).closest('div').find('input').val(v);
  }
  window.requestAnimationFrame(update);
}
 
$btnInc.on('mousedown', incOn);
$btnInc.on('mouseup mouseout', incdecOff);
$btnDec.on('mousedown', decOn);
$btnDec.on('mouseup mouseout', incdecOff);
$out.on('input', function(){ v = $out.val(); });
 
function incOn(){ action = "inc";}
function incdecOff(){action = undefined; delay = maxDelay;}
function decOn(){ action = "dec";}
  
window.requestAnimationFrame(update);
Добавлено через 4 минуты
https://jsfiddle.net/8sx2vx6s/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
 
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
 
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
Javascript
1
2
3
4
5
6
7
8

$('.inc').on('click', function() {
    const $input = $(this).closest('div').find('input');
    $input.val(parseInt($input.val(), 10) + 1);
});
$('.dec').on('click', function() {
    const $input = $(this).closest('div').find('input');
    parseInt($input.val(), 10) > 1 && $input.val(parseInt($input.val(), 10) - 1);
});
0
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
01.09.2017, 07:24  [ТС] 3
Цитата Сообщение от dailydose Посмотреть сообщение
Javascript
1
2
3
4
5
6
7
8

$('.inc').on('click', function() {
* * const $input = $(this).closest('div').find('input');
* * $input.val(parseInt($input.val(), 10) + 1);
});
$('.dec').on('click', function() {
* * const $input = $(this).closest('div').find('input');
* * parseInt($input.val(), 10) > 1 && $input.val(parseInt($input.val(), 10) - 1);
});
был у меня такой вариант, но мне необходимо, что при зажатии кнопки количество увеличивалось/уменьшалось
0
671 / 217 / 88
Регистрация: 21.07.2016
Сообщений: 1,036
Записей в блоге: 2
01.09.2017, 08:21 4
Цитата Сообщение от Leonardo65 Посмотреть сообщение
мне необходимо, что при зажатии кнопки количество увеличивалось/уменьшалось
дык в чём проблема то?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

var $btnInc = $('.inc')
  ,$btnDec = $('.dec')
  ,$out = $('.amount')
  ,v = $out.val()
  ,maxDelay = 300
  ,delay = maxDelay
  ,minDelay = 800
  ,start
  ,action
;
 
function update(timestamp) {
  if(!start) start = timestamp;
  if(action  &&  (timestamp - start) >= delay) {
    start = timestamp;
    if( delay > minDelay  &&  (delay -= 100) <= minDelay) delay = minDelay;
    switch(action){
      case "inc": v++; break;
      case "dec": if (v>1) v--; break;
    }
    $(this).closest('div').find('input').val(v);
  }
  window.requestAnimationFrame(update);
}
 
$btnInc.on('mousedown', incOn);
$btnInc.on('mouseup mouseout', incdecOff);
$btnDec.on('mousedown', decOn);
$btnDec.on('mouseup mouseout', incdecOff);
$out.on('input', function(){ v = $out.val(); });
 
function incOn(){ action = "inc";}
function incdecOff(){action = undefined; delay = maxDelay;}
function decOn(){ action = "dec";}
  
window.requestAnimationFrame(update);
0
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
01.09.2017, 08:31  [ТС] 5
Цитата Сообщение от dailydose Посмотреть сообщение
проблема
Грубо говоря у меня 100 позиций товара в интернет магазине.
когда я на одной позиции начинаю менять кол. при помощи счетчика, то меняется кол. на всех ста позициях

http://jsfiddle.net/uxurhakw/19/
0
671 / 217 / 88
Регистрация: 21.07.2016
Сообщений: 1,036
Записей в блоге: 2
01.09.2017, 09:22 6
http://jsfiddle.net/uxurhakw/20/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
 
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

var $btnInc = $('.inc')
  ,$btnDec = $('.dec')
  ,$out = $('.amount')
  ,v = $out.val()
  ,maxDelay = 400
  ,delay = maxDelay
  ,minDelay = 100
  ,start
  ,action,
  el
;
 
function update(timestamp) {
  if(!start) start = timestamp;
  if(action  &&  (timestamp - start) >= delay) {
    start = timestamp;
    if( delay > minDelay  &&  (delay -= 100) <= minDelay) delay = minDelay;
    switch(action){
      case "inc": v++; break;
      case "dec": if (v>1) v--; break;
    }
    $(el).closest('div').find('input').val(v);
  }
  window.requestAnimationFrame(update);
}
 
$btnInc.on('mousedown', incOn);
$btnInc.on('mouseup mouseout', incdecOff);
$btnDec.on('mousedown', decOn);
$btnDec.on('mouseup mouseout', incdecOff);
$out.on('input', function(){ v = $out.val(); });
 
function incOn(e){ action = "inc"; el = e.target;}
function incdecOff(e){action = undefined; delay = maxDelay; el = e.target;}
function decOn(e){ action = "dec"; el = e.target;}
  
window.requestAnimationFrame(update);
1
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
01.09.2017, 09:37  [ТС] 7
Цитата Сообщение от dailydose Посмотреть сообщение
$(el).closest('div').find('input').val(v);
Спасибо. только получается .
На первой позиции я выбрал кол 2
Вторая позиция начинает отчет с 3
Третья с 4
0
671 / 217 / 88
Регистрация: 21.07.2016
Сообщений: 1,036
Записей в блоге: 2
01.09.2017, 09:45 8
Лучший ответ Сообщение было отмечено Leonardo65 как решение

Решение

Цитата Сообщение от Leonardo65 Посмотреть сообщение
На первой позиции я выбрал кол 2
Вторая позиция начинает отчет с 3
Третья с 4
http://jsfiddle.net/uxurhakw/21/

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

var $btnInc = $('.inc')
  ,$btnDec = $('.dec')
  ,$out = $('.amount')
  ,v = $out.val()
  ,maxDelay = 400
  ,delay = maxDelay
  ,minDelay = 100
  ,start
  ,action,
  el
;
 
function update(timestamp) {
  if(!start) start = timestamp;
  if(action  &&  (timestamp - start) >= delay) {
    start = timestamp;
    v = parseInt($(el).closest('div').find('input').val(), 10);
    if( delay > minDelay  &&  (delay -= 100) <= minDelay) delay = minDelay;
    switch(action){
      case "inc": v++; break;
      case "dec": if (v>1) v--; break;
    }
    $(el).closest('div').find('input').val(v);
  }
  window.requestAnimationFrame(update);
}
 
$btnInc.on('mousedown', incOn);
$btnInc.on('mouseup mouseout', incdecOff);
$btnDec.on('mousedown', decOn);
$btnDec.on('mouseup mouseout', incdecOff);
$out.on('input', function(){ v = $out.val(); });
 
function incOn(e){ action = "inc"; el = e.target;}
function incdecOff(e){action = undefined; delay = maxDelay; el = e.target;}
function decOn(e){ action = "dec"; el = e.target;}
  
window.requestAnimationFrame(update);
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
 
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
1
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
01.09.2017, 09:49  [ТС] 9
Цитата Сообщение от dailydose Посмотреть сообщение
http://jsfiddle.net/uxurhakw/21/
Огромное Вам Вселенское спасибо!
0
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
01.09.2017, 10:08 10
Раз нормальный ответ уже дан, есть ленивый вариант
Можно подключить spinner jQuery UI. Может пригодится кому-то.
Вложения
Тип файла: zip ui.zip (45.4 Кб, 5 просмотров)
1
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
01.09.2017, 11:34  [ТС] 11
Цитата Сообщение от dailydose Посмотреть сообщение
проблема
А вы не знаете ?
Проблема с Safari.
Браузер полностью отказывается выполнять данный скрипт

Добавлено через 2 минуты
Цитата Сообщение от mrtoxas Посмотреть сообщение
spinner jQuery UI
Попробую с ним поработать
0
01.09.2017, 11:34
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 01.09.2017, 11:34
Помогаю со студенческими работами здесь

Как настроить правильную активизацию товаров при появлении на остатке?
Ранее были сделаны доработки по обмену, а именно деактивация товаров , которых нет на остатке и...

Внедрение компилятора на сайт
Всем привет, мне для дипломной работы нужно внедрить компилятор Паскаль на сайт. Суть работы:...

Счетчик товаров в корзине
Делаю модуль для опенкарта, сверстал все, нужно сделать переключение &quot;что-то типа счетчика&quot;. Товар...

Внедрение карты Google на сайт
Скажите как запостить к себе на сайт вот ету бесплатную карту? http://www.openstreetmap.org/

AJAX: Как прикрутить счетчик товаров?
Здравствуйте! Есть ajax добавление товара в корзину. Есть php счетчик отображающий кол-во...

Внедрение кириллицы в сайт под управлением FLASH+XML
Доброго Вам времени суток! Такая проблема, есть студия делающая Флэш шаблоны с привязкой к ним...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru