Jump to content
Sign in to follow this  
timedontwait

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

Recommended Posts

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

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

$(document).ready(function(){

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

ну так не только добавил 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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Я думаю из-за

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

Share this post


Link to post
Share on other sites

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


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

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

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

  • +1 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.