Увеличить/уменишить число при клике на кнопку
Добрый день! Я не давно на этом форуме и вообще в 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, добрый день, я прошу прощения, но я практически нечего не понял из статей которые вы прислали. Вернее даже не так, я перечитал их огромное количество раз, понял зачем нужно делегирование, но не понял как оно применимо к моему случаю:(
Если Вас не затруднить пожалуйста, помогите разобраться новичку |
Как вариант...
$(function (){
$('body').on('click','.number-prev',function (){
inc(this.parentNode,-1);
});
$('body').on('click','.number-next',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);
};
});
|
ksa, Спасибо большое, увы в тех статьях которые Вы прислали ранее нечего не говорилось о методе " $('body').on('click','.number-prev',function (){"
Вы очень помогли) У меня правда еще вопрос, как раз к стати образовался, относительно делегирования. Вы уже и так достаточно времени на меня потратили. Попрошу Вас уделить еще немного, что бы у меня больше некогда не возникало сложностей с делегированием:) У меня в корзине есть кнопки - "Удалить товар", я хочу повесить на нее анимацию загрузки. Что бы человек нажал на кнопку, и пока происходит удаление товара, вместо кнопки появилась гифвка с простенькой анимацией, вот разметка кнопки: <button id="delete" type="button" name="btn_delet_product" onClick="truncate_product()"> <img class="active-close visible-close" src="include/img/delete.png" alt="Очистить корзину"> //эта картинка стоит по умолчанию, её делает видимой класс "visible-close", при нажатии на кнопку класс "visible-close" должен ремувиться а картинка пропадать <img class="loader-close" src="include/img/loader-close.gif" alt="Очистить корзину"> //эта картинка по умолчанию скрыта и должна появляться при нажатии на кнопку (через add должен добавиться класс который сделает её видимой) </button> Скрипт у меня следующий:
function delet_product(product_id){
$('.active-close').removeClass('visible-close');// убираем класс у видимой картинки и делаем её невидимой
$('.loader-close').addClass('visible-close');// добавляем класс к невидимой картинке и делаем ее видимой
$.ajax({
type: "post",
url: "main_c/delet_product",
cache: false,
data: {'product_id':product_id},
success: function(data){
$('.active-close').addClass('visible-close');// возвращаем все назад
$("#content").load("index.php #content");// возвращаем все назад
}
});
}
Как Вы и сами увидели это не совсем правильно потому как такой скрипт будет показывать гифвку на всех кнопка удаления, а нужно только на той, на которую нажали. Моя ситуация очень похожа на пример описанный здесь https://learn.javascript.ru/event-delegation Но не совсем там речь идет об одном активном элементе (ячейке таблицы), а у меня их получается 2 - картинка по умолчанию и картинка загрузки. Я уже пару часов пытаюсь перекрутить ситуацию описанную в статье под себя, но пока не очень хорошо выходит. Если Вас не затруднит, подскажите пожалуйста как сделать правильно |
Цитата:
|
Цитата:
В нее нужно передать ссылку на текущий элемент, а далее все будет "плясаться" от него. ;) |
Цитата:
Прошу прощения, не совсем понял вас. Вернее частично понял. В разметке которую я указал выше, есть небольшая опечатка вместо truncate_product() там вызывается именно delet_product(), вот актуальный вариант разметки: <button id="delete" type="button" name="btn_delet_product" onClick="delet_product()"> <img class="active-close visible-close" src="include/img/delete.png" alt="Очистить корзину"> //эта картинка стоит по умолчанию, её делает видимой класс "visible-close", при нажатии на кнопку класс "visible-close" должен ремувиться а картинка пропадать <img class="loader-close" src="include/img/loader-close.gif" alt="Очистить корзину"> //эта картинка по умолчанию скрыта и должна появляться при нажатии на кнопку (через add должен добавиться класс который сделает её видимой) </button> А вот что Вы имеете в виду: "В нее нужно передать ссылку на текущий элемент, а далее все будет "плясаться" от него. ", - я из-за своей неопытности не понял. Разъясните пожалуйста |
Цитата:
Тестовый пример ты не делаешь... Т.ч. я даже предположить не могу какой там у тебя ДОМ сформировался. :( |
Понял Вас, вот подлинный вариант разметки:
<div id="content" class="container-fluid"> <div class="col-lg-1 col-md-1 col-sm-1text-center"> <button id="delete" type="button" name="btn_delet_product" onClick="truncate_product()"> <img class="active-close visible-close" src="include/img/delete.png" alt="Очистить корзину"> // кнопка очистить корзину <img class="loader-close" src="include/img/loader-close.gif" alt="Очистить корзину"> // кнопка очистить корзину </button> </div> <div class="row cart-product"> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12"> <div class="row product-info"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 cart-img"> <img class="product-img" src="include/img/<?=$getName["img"];?>" alt="cart_img"> // здесь изображение товара </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 cart-title"> <h2><?=$getName["title"];?></h2><br> // здесь название товара <span>Артикул: <?=$getName["articul"];?></span> // здесь артикул товара </div> <div class="col-lg-2 col-md-2 col-sm-2 hidden-xs"> <h2><?=$getName["cost"];?></h2><span> грн/шт</span> // здесь цена товара </div> <div class="col-lg-1 col-md-1 col-sm-1 text-center"> <button type="button" id="close" name="btn_delet_product" onClick="delet_product(<?=$getName["id"];?>)"> <img class="active-close visible-close" src="include/img/close.png" alt="Удалить товар"> // кнопка удалить товар <img class="loader-close" src="include/img/loader-close.gif" alt="Удалить товар"> // кнопка удалить товар </button> </div> </div> </div> </div> </div> |
Цитата:
<!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'>
</style>
<script type='text/javascript'>
$(function (){
});
function delet_product(Obj,product_id){
// убираем класс у видимой картинки и делаем её невидимой
$(Obj).find('.active-close').removeClass('visible-close');
// добавляем класс к невидимой картинке и делаем ее видимой
$(Obj).find('.loader-close').addClass('visible-close');
$.ajax({
type: "post",
url: "main_c/delet_product",
cache: false,
data: {'product_id':product_id},
success: function(data){
// возвращаем все назад
$(Obj).find('.active-close').addClass('visible-close');
// возвращаем все назад
$("#content").load("index.php #content");
}
});
}
</script>
</head>
<body>
<div id="content" class="container-fluid">
<div class="col-lg-1 col-md-1 col-sm-1text-center">
<button id="delete" type="button" name="btn_delet_product" onClick="truncate_product()">
<img class="active-close visible-close" src="include/img/delete.png" alt="Очистить корзину"> // кнопка очистить корзину
<img class="loader-close" src="include/img/loader-close.gif" alt="Очистить корзину"> // кнопка очистить корзину
</button>
</div>
<div class="row cart-product">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<div class="row product-info">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 cart-img">
<img class="product-img" src="include/img/<?=$getName["img"];?>" alt="cart_img"> // здесь изображение товара
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 cart-title">
<h2><?=$getName["title"];?></h2><br> // здесь название товара
<span>Артикул: <?=$getName["articul"];?></span> // здесь артикул товара
</div>
<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs">
<h2><?=$getName["cost"];?></h2><span> грн/шт</span> // здесь цена товара
</div>
<div class="col-lg-1 col-md-1 col-sm-1 text-center">
<button type="button" id="close" name="btn_delet_product" onClick="delet_product(this,<?=$getName["id"];?>)">
<img class="active-close visible-close" src="include/img/close.png" alt="Удалить товар"> // кнопка удалить товар
<img class="loader-close" src="include/img/loader-close.gif" alt="Удалить товар"> // кнопка удалить товар
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Цитата:
Далее все действия относительно нее... Цитата:
|
ksa, Принцип я понял, но все же функция не видит $(Obj), при нажатии на кнопку удалить, консоль выводит Obj is not defined(…) :(
|
Цитата:
onClick="delet_product(this,<?=$getName["id"];?>)"> |
да, конечно, все как Вы и написали, не понимаю почему не работает:(
|
| Часовой пояс GMT +3, время: 11:23. |