Показать сообщение отдельно
  #1 (permalink)  
Старый 30.05.2012, 21:14
Новичок на форуме
Отправить личное сообщение для Феликс Юрьевич Посмотреть профиль Найти все сообщения от Феликс Юрьевич
 
Регистрация: 30.05.2012
Сообщений: 2

Проблема с "parents"
Всем доброго времени суток.

Есть скрипт который при нажатии на миниатюру меняет главную картинку. То есть нарисован стол и под ним есть маленькие картинки с изображением текстур, при нажатии на текстуру меняется картинка со столом на цвет текстуры. Это все уже реализовано. Но реализовано через одно место. То есть в HTML - http://mrfelix.ru/meb-eko.html стоит следующий код:

<div class="middle_col"> 
... 
<td style="WIDTH: 465px" rowSpan="3"><img id="thumbnail" class="photo" src="images/meb-eko_buk.jpg" width="450"> 
... 
<div class="colors"> 
</div></td><td></td></tr></tbody></table></div> 

и 

<div class="middle_col"> 
... 
<td style="WIDTH: 465px" rowSpan="3"><img id="thumbnail2" class="photo" src="images/meb-eko_buk.jpg" width="450"> 
... 
<div class="colors2"> 
... 
</div></td><td></td></tr></tbody></table></div>


Полный код соответственно можно посмотреть перейдя по ссылке.

Пока получилось сделать следующим образом: (файл - http://mrfelix.ru/js/jquery.inforos.js)

$('.colors a').click(function(e) {

      var self = $(this);

      var thumb = $('#thumbnail');

      thumb.attr('src', this);

      $('.colors a').removeClass('active_color');

      self.addClass('active_color');

      e.preventDefault();

   });

и

 $('.colors2 a').click(function(e) {

      var self = $(this);

      var thumb = $('#thumbnail2');

      thumb.attr('src', this);

      $('.colors2 a').removeClass('active_color');

      self.addClass('active_color');

      e.preventDefault();

   });

Так все работает.

Но поскольку таких изделий у меня три десятка, то это не самый удачный способ. Советуясь с людьми мне предложили заменить код выше на:

$(document).ready(function() {
    $('.colors > a').each(function() {
        $(this).attr('data-img',$(this).attr('href'));
        $(this).attr('href','javascript:void(0);');
        $(this).click(function(){
            $(this).parents('table').find('#thumbnail').attr('  src', $(this).attr('data-img'));
                            })
    });    
            });

Что сейчас и висит на сайте.

Собственно проблема в том, что оно не работает как надо. То есть в "thumbnail" работает как надо, а в "thumbnail2" открывается стол в новом окне.

Прошу помочь мне с этим всем безобразием.

PS И еще, я работаю конструктором мебели и прошу по возможности использовать фразы которые если я не пойму, то хотя бы смог загуглить . А то бывает жаргонизмы сложно понять.

Последний раз редактировалось Феликс Юрьевич, 30.05.2012 в 21:31.
Ответить с цитированием