Перейти к содержанию
timedontwait

При наведении на карточку товара в категории

Рекомендуемые сообщения

Вообщем, добавил блок .hide_product

Сделал минискрипт, который при наведении на .image делает видимым(добавляет класс) .hide_product

$(document).ready(function(){

 
   $('.image').live('hover',function(){
      $(this).parent().find('.hide_product').toggleClass('show');
 
   });
})

 

 
 
Проблема в том что он каждый раз создает копию блока .hide_product при переключении сетки\списка товаров.
Кто может подсказать решение, или помочь не за бесплатно в крайнем случае ?
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Я с CSS еще не пробовала. Человек написал, что решено, хотя что там решено не ясно пока)) а вот у вас получилось то, что мне нужно как раз. Можно по подробней, как такое реализовать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну вот скрипт Выше, он при наведении на блок картинки ищет рядом блок hide_product  и добавляет ему класс showhide_product - по умолчанию скрытый, а show - делает display: block. Ну и соответственно вывел в категории этот блок, забил туда нужные данные, навел красоту и все ) ну почти все, остался глюк этот, видимо есть иное универсальное решение

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну вот скрипт Выше, он при наведении на блок картинки ищет рядом блок hide_product  и добавляет ему класс showhide_product - по умолчанию скрытый, а show - делает display: block. Ну и соответственно вывел в категории этот блок, забил туда нужные данные, навел красоту и все ) ну почти все, остался глюк этот, видимо есть иное универсальное решение

 

Спасибо, хоть какое то продвижение в этом вопросе и результат есть, а то что множит блок это конечно капец. Наверное что то в самом скрипте надо прописать, типа там НЕ РАЗМНОЖАТЬ))) где же умельцы джавашники?)) Помогите решить!!!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ну так не только добавил hover-эффект, но и зачем-то полез/поломал display

		$('.product-list').attr('class', 'product-grid');
		
		$('.product-grid > div').each(function(index, element) {
			html = '';
			
			var image = $(element).find('.image').html();
			
			if (image != null) {
				html += '<div class="image">' + image;
			}
			
			html += '<div class="name">' + $(element).find('.name').html() + '</div>';
			html += '<div class="hide_product">' ;
			
			var image = $(element).find('.image').html();
			
			if (image != null) {
				html += '<div class="imagehov">' + image + '</div>';
			}
			html += '<div class="namehover">' + $(element).find('.name').html() + '</div>';
			html += '<div class="description">' + $(element).find('.description').html() + '</div>';
			
			var price = $(element).find('.price').html();
			
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
			
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
						
			html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
			html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
			html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
			html += '</div>' + '</div>';
			$(element).html(html);
		});	

в общем, эту часть следует вернуть в исходное

 

http://voobschem.ru/

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну так а иначе как, я ведь должен указать этот блок в разметке, потому и добавил его вывод

html += '<div class="hide_product">' ;

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Я думаю из-за

var image = $(element).find('.image').html();


if (image != null) { 
html += '<div class="image">' + image + '</div>';
}

Поэтому не нужно добавлять

html += '<div class="hide_product">' ;

Потому что первый код и так находит всё то, что упаковано между <div class="image"></div>

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

уже добавляется родительский блок image, но у вас почему-то дважды


var image = $(element).find('.image').html();

if (image != null) {
html += '<div class="image">' + image;
}

вам мало помочь с решением? нужно ещё убедить?

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.