Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проблема с "parents" (https://javascript.ru/forum/dom-window/28714-problema-s-parents.html)

Феликс Юрьевич 30.05.2012 21:14

Проблема с "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 И еще, я работаю конструктором мебели и прошу по возможности использовать фразы которые если я не пойму, то хотя бы смог загуглить :). А то бывает жаргонизмы сложно понять.

Deff 30.05.2012 22:15

Цитата:

Сообщение от Феликс Юрьевич
PS И еще, я работаю конструктором мебели и прошу по возможности использовать фразы которые если я не пойму,

Вот эту строку:
$(this).click(function(){
  $(this).parents('table').find('#thumbnail').attr('src', $(this).attr('data-img'));

Замените на эту
$(this).click(function(){
            $(this).parents('table:first').find('#thumbnail,#thumbnail2').attr('src', $(this).attr('data-img'));

Феликс Юрьевич 31.05.2012 09:21

Deff, спасибо за внимание.

Решилось все немного иначе: "thumbnail2" изменил на "thumbnail" и тоже самое с "color2". И в конце body поставил

<script type="text/javascript">
			$(document).ready(function() {
                $('.colors > a').each(function() {
                    $(this).bind('click', function(e) {
                        $(this).parents('div.middle_col').find('.photo').attr('src', $(this).attr('href'));
                        e.preventDefault();
                    })
                });    
            });  
		</script>

, а http://mrfelix.ru/js/jquery.inforos.js отключил.
Сказать сразу о том, что вопрос закрыт не смог, так как отрубился интернет :) .


Часовой пояс GMT +3, время: 02:44.