Присвоение класса после нажатия
Всем привет.
В общем у меня на сайте стоит боковая панель с корзиной у которой присвоен класс .is-hidden и при нажатии он убирается и панель выходит: http://empire-taste.16mb.com Как сделать чтобы класс .is-hidden распространялся только на тег с классом .mcart-panel ? в данный момент класс .is-hidden присваивается к тегу с классом .mcart-panel и тегу .mcart которая ниже. Функционал панели: empire-taste.16mb.com/templates/et/js/script.js
$(document).ready(function($) {
var closeBtn = jQuery('#mcart-close'),
panel = closeBtn.parent();
setTimeout(function(){ panel.addClass('is-hidden'); }, 150);
closeBtn.on('click', function(){ panel.toggleClass('is-hidden'); })
});
$(document).mouseup(function (e) {
var container = $(".mcart-panel");
if (container.has(e.target).length === 0){
$(".mcart-panel").addClass("is-hidden");
}
});
|
кто нибудь помогите, уже 2 день голову ломаю
|
Цитата:
$(document).mouseup(function (e) не понятно почему вне $(document).ready(function($)? |
Цитата:
Но как только я ставлю span содержимое внутри тега mcart тогда класс is-hidden присваивается к .mcart-panel и ко второму "внутреннему" тегу .mcart |
Цитата:
Или поясняйте на примере html кода чего вы хотите, иначе ничего не понять. |
Цитата:
Изначально у тега mcart-panel есть is-hidden (по шаблону) а у mcart нет. но когда открываешь сайт то к mcart тоже присваивается класс is-hidden <div class="mcart-panel is-hidden"> <div class="mcart"> <!-- кнопка боковой панели --> <span class="mcart-close" id="mcart-close"><i class="fa fa-shopping-cart"></i> <b>Корзина товаров</b></span> <!-- кнопка боковой панели --> <div class="features-panel"> содержимое корзины товаров </div> </div> </div> .is-hidden присваивается к обоим классам. Помогите сделать так чтобы боковая панель работала нормально как в начале так и после добавления товара в корзину. И всё у меня больше нет проблем. |
$(document).ready(function($) {
var closeBtn = jQuery('#mcart-close'),
panel = closeBtn.parent();
setTimeout(function(){ panel.addClass('is-hidden'); }, 150);
closeBtn.on('click', function(){ panel.toggleClass('is-hidden'); })
});
вот этот код надо править? |
Это из отладчика:
Ошибка карты кода: request failed with status 404 URL ресурса: http://empire-taste.16mb.com/templat.../jquery.min.js URL карты кода: jquery-1.10.2.min.map Вопрос: зачем попытка его подключения, если ранее JQ уже подключен - <script type="text/javascript" src="/engine/classes/js/jquery.js"></script>? Что означает это: а) в файле sript.js
$(document).ready(function($) {
var closeBtn = jQuery('#mcart-close'),
panel = closeBtn.parent();
setTimeout(function(){ panel.addClass('is-hidden'); }, 150);
closeBtn.on('click', function(){ panel.toggleClass('is-hidden'); })
});
$(document).mouseup(function (e) {
var container = $(".mcart-panel");
if (container.has(e.target).length === 0){
$(".mcart-panel").addClass("is-hidden");
}
});
б) в файле mcart.js
$(document).ready(function($) {
var closeBtn = jQuery('#mcart-close'),
panel = closeBtn.parent();
setTimeout(function(){ panel.addClass('is-hidden'); }, 150);
closeBtn.on('click', function(){ panel.toggleClass('is-hidden'); })
});
$(document).mouseup(function (e) {
var container = $(".mcart-panel");
if (container.has(e.target).length === 0){
$(".mcart-panel").addClass("is-hidden");
}
})
Какой из них верен? $(document).ready(function($) ... это обработчик готовности DOM, и достаточно один раз прописать это в коде, где устанавливать обработчики на элементы, то есть $(document).mouseup(function (e) должен быть в $(document).ready(function($), причем в файле sript.js он уже прописан. Но, ремируйте пока то что в sript.js, а далее что это за бардак разбирайтесь сами. Считаем, что рабочий, это mcart.js. Этот файл подключается в конце страницы, то есть в данном случае $(document).ready(function($) можно и забыть, к этому моменту ваша кнопка уже есть. А теперь разбор полетов: closeBtn = jQuery('#mcart-close') - это кнопка panel = closeBtn.parent() - это родитель кнопки Что является родителем кнопки? Смотрите на свой html. А ее родитель <div class="mcart">. Так чему вы добавляете класс, с которым боретесь, вот тут: panel.addClass('is-hidden') и panel.toggleClass('is-hidden')? Вот это setTimeout(function(){ panel.addClass('is-hidden'); }, 150); пока вообще выбросим, если вы хотите при загрузке страницы показать что в корзине, то времени 150 мс явно недостаточно. А если нет, то выбросить к чертовой матери - присвоить класс "по умолчанию" можно и на стороне сервера при запросе страницы. И так, в коде mcart.js должно быть только:
$('#mcart-close').click(function() {
$(this).closest('.mcart-panel').toggleClass('is-hidden')
})
Проверяйте, щелкайте, etc. Это нужно? А далее уже добавляйте иное, $(document).mouseup...., только, если: var container = $(".mcart-panel"); то зачем же получать ее еще раз:
if (container.has(e.target).length === 0){
$(".mcart-panel").addClass("is-hidden");
}
используйте уже полученное:
$(document).mouseup(function (e) {
var container = $(".mcart-panel");
if (!container.has(e.target).length) container.addClass("is-hidden");
});
|
laimas в файле sript.js я ещё вчера убрал все от панели.
и сделал для в отдельном файле mcart.js сделал как вы сказали. боковая панель открывается и закрывается, но теперь после добавления товара или увеличения кол-ва, кнопка не кликаетЦа |
как теперь быть? я так понял теперь уже http://empire-taste.16mb.com/templat...assets/libs.js виновата?
и почему у меня при увеличении кол-ва просит подтверждения действия "не указан ID товара" ? если я его указываю:
<div class="project-post col-md-4 col-sm-6 col-xs-12">
<div class="triggerAnimation animated ani-1-2 bounce" data-animate="bounce">
<img src="[xfvalue_image_url_img]" alt="">
<div class="hover-box">
<a class="zoom" href="[xfvalue_image_url_img]" title="{title}" title=""><i class="fa fa-search"></i></a>
</div>
<h3>{title}</h3>
<p>{short-story}</p>
<div class="price-box">
<ul class="cart-fast-add ignore-select">
<li class="col-25">[xfvalue_price] ₽</li>
<li class="col-25">[xfvalue_weight]гр</li>
<li class="cart-count">
<span class="cart-count-minus">-</span>
<input type="text" value="1" class="cart-count-val" />
<span class="cart-count-plus">+</span>
</li>
<li class="col-50"><button type="button" class="cart-fast-add-do btn btn-danger" data-id="{news-id}">Купить</button></li>
</ul>
</div>
</div>
</div>
Не могу понять в чем теперь проблема. Почему после добавления или увеличения товара панель перестает вылазить? И почему появляется уведомление о "не указанном ID" ? В консоли ни одной ошибки не выдает |
| Часовой пояс GMT +3, время: 06:13. |