Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2014, 13:52
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

Проблема с hover
Помогите решить проблему

<div>
<div class="img"><img src="большое фото" class="image"></div>
<div class="new_img">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
</div>
</div>
 
<div>
<div class="img"><img src="большое фото" class="image"></div>
<div class="new_img">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
</div>
</div>
 
<div>
<div class="img"><img src="большое фото" class="image"></div>
<div class="new_img">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
</div>
</div>


и т.д

Вот код, который использую для подмены src изображения.
$(function() {
    var osrc = $('.image').attr('src');
    $('.big').hover(
        function() {
            var nsrc = $(this).attr('rel');
                $('.image').attr({src : ''+nsrc+''});
        },
        function() {
            $('.image').attr({src : ''+osrc+''});
        }
    );
});

Работает, но неверно, меняется у всех .image картинка, которые есть на странице, а надо только у этого дива, в который он обрамлён!
Помогите решить проблему, замучился уже.

Спасибо огромное заранее!
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2014, 14:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Ingiborn,

$(function () {
    $(".img").each(function (indx, el) {
        var image = $(".image", el),
            osrc = image.attr("src"),
            next = $(el).next();
        $(".big", next).hover(function () {
            var nsrc = $(this).attr("rel");
            image.attr({
                src: nsrc
            })
        }, function () {
            image.attr({
                src: osrc
            })
        })
    })
});
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2014, 15:24
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

Не работает
Ответить с цитированием
  #4 (permalink)  
Старый 10.07.2014, 15:31
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

Не заменяется картинка..
У моего варианта работает, но если наводишь на любое изображение с классом big, то все изображение с классом image становяться тем изображением, которое в классе big, а надо чтобы только у одного
<!-- Блок с фото 1 ->
<div>
<div class="img"><img src="большое фото" class="image"></div>
<div class="new_img">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
</div>
</div>
<!--конец Блок с фото 1 -->

<!-- Блок с фото 2 ->
<div>
<div class="img"><img src="большое фото" class="image"></div>
<div class="new_img">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
</div>
</div>
<!-- Блок с фото 2 -->

Навёл на любой big, в блоке 1 основное фото (image) поменялось на big, но только у этого блока 1, а не у всех.
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2014, 15:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Ingiborn,
в каком месте неработает?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
    $(".img").each(function (indx, el) {
        var image = $(".image", el),
            osrc = image.attr("src"),
            next = $(el).next();
        $(".big", next).hover(function () {
            var nsrc = $(this).attr("rel");
            image.attr({
                src: nsrc
            })
        }, function () {
            image.attr({
                src: osrc
            })
        })
    })
});

</script>
<div>
<div class="img"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img1-lg.jpg" class="image"></div>
<div class="new_img">
                <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg" rel="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-lg.jpg" class="big">
                <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-thumb.jpg" rel="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-lg.jpg" class="big">
                <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg" rel="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-lg.jpg" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
</div>
</div>

<div>
<div class="img"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-lg.jpg" class="image"></div>
<div class="new_img">
                <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img6-thumb.jpg" rel="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img6-lg.jpg" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
</div>
</div>

<div>
<div class="img"><img src="большое фото" class="image"></div>
<div class="new_img">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
                <img src="маленькая фотка" rel="большое фото" class="big">
</div>
</div>

</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 10.07.2014, 15:54
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

Хм.. может что-то я напортачил, щас буду искать.
Ответить с цитированием
  #7 (permalink)  
Старый 10.07.2014, 16:21
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

Окончательная структура такая, при ней не хочет работать =(
<div>
<div class="img"><a href="большая фотка"><img src="большая фотка" class="image"></a></div>
<div class="title"><a href="ссылка на альбом">Название альбома</a></div>
<div class="new_img">
	<div class="news_img">
	        <img src="маленькая фотка" rel="большая фотка" class="big">
		<img src="маленькая фотка" rel="большая фотка" class="big">
		<img src="маленькая фотка" rel="большая фотка" class="big">
		<img src="маленькая фотка" rel="большая фотка" class="big">
		<img src="маленькая фотка" rel="большая фотка" class="big">
		<img src="маленькая фотка" rel="большая фотка" class="big">
	</div>
</div>
</div>


Спасибо заранее!!!!! За всё!
Ответить с цитированием
  #8 (permalink)  
Старый 10.07.2014, 16:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Ingiborn,
строка 16 --
next = $(el).parent();
Ответить с цитированием
  #9 (permalink)  
Старый 10.07.2014, 17:14
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

Сообщение от рони Посмотреть сообщение
Ingiborn,
строка 16 --
next = $(el).parent();
СПАСИБО!!!!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Изменение свойства :hover по клику дива BoB jQuery 6 21.10.2012 13:36
Установка цвета через функцию .css() сбрасывает цвет для :hover xintrea jQuery 4 18.08.2012 15:38
Проблема с обработкой ескольких .hover() anocean jQuery 3 15.06.2012 22:43
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28