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