Как вариант...
$(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(…) :(
|
| Часовой пояс GMT +3, время: 12:27. |