Выбрать все элементы кроме $(this)

Если Вы совсем новичок и слабо представляете себе возможности jQuery, не можете понять в каком форуме задать свой вопрос - Вам сюда.

Модераторы: TRAHOMOTO, tuareg, Gennady

Выбрать все элементы кроме $(this)

Сообщение shustrikk » 13 мар 2010, 03:45

Ситуация вкратце: есть несколько изображений в качестве ссылок меню, которые при загрузки становятся чб. Для них определены события js: onmouseout и onmouseover, которые переводят из чб в нормальное и обратно.

js:
Код: выделить все
function desaturate(img) {
                var img2 = Pixastic.process(img, "desaturate");
                img2.onmouseover = function() {
                        Pixastic.revert(this);
                }

        }
        window.onload = function (){
            var img = document.getElementsByTagName('.MyClass img');
            for ( i in img ){
                desaturate(img[i]);
            }
        }


Задача: нужно выделить одну активную ссылку (страница не перезагружается), т.е. сделать картинку цветную, а все остальные опять чб. Создал событие по клику, попытался манипулировать атрибутами <img>, получается только выделить, а вот перевести ее обратно при клике на другую картинку — нет. Пробовал реализовать это через jQuery так:

Код: выделить все
$(".MyClass a img").click(function () {
$(".MyClass a img").attr({onmouseout: "desaturate(this);"});
$(this).removeattr("onmouseout");      
});


Добавляем событие onmouseout для всех картинок (переводит в чб по событию).
Удаляем событие onmouseout для текущей картинки (не переводит в чб)

Вообще, очень интересно, возможна ли такое обращение к элементам и в такой последовательности? Возможно ли каким-либо способом выделить все элементы, кроме кликнутого и присвоить им что угодно (стиль и т.д.)?
shustrikk
 
Сообщений: 2
Зарегистрирован: 13 мар 2010, 03:43

Re: Выбрать все элементы кроме $(this)

Сообщение TRAHOMOTO » 13 мар 2010, 11:03

Я правильно вас понял?
Код: выделить все
$(".MyClass a img").attr({onmouseout: "desaturate(this);"});

Эта строка должна добавить всем картинкам внутри ссылки, родитель которой элемент с классом .MyClass, атрибут?
Предполагается наличие объекта
Аватар пользователя
TRAHOMOTO
Модератор
 
Сообщений: 513
Зарегистрирован: 19 янв 2010, 17:18
Откуда: Украина, Луганск

Re: Выбрать все элементы кроме $(this)

Сообщение shustrikk » 13 мар 2010, 11:28

TRAHOMOTO писал(а):Я правильно вас понял?

Да, так. Этот атрибут у <img> есть изначально:
Код: выделить все
<img onmouseout="desaturate(this);" onload="desaturate(this)"...

По клику он удаляется только у $(this) и добавляется всем. Подскажите, пожалуйста, как вообще реализовывать подобные меню с выделением только кликнутого элемента?
shustrikk
 
Сообщений: 2
Зарегистрирован: 13 мар 2010, 03:43

Re: Выбрать все элементы кроме $(this)

Сообщение Nekromancer » 13 мар 2010, 12:08

Это просто, но понадобится не 2 строчки кода)) кстати пишется правильно "removeAttr" ))
Код: выделить все
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  <style type="text/css">
body, html {height: 100%; width: 100%; padding: 0; margin: 0; background: #454545; overflow: auto;}
</style>
<script type="text/javascript">
function someFunction(img){
   $('#result').html(img.className)
};
function altSomeFunction(img){
   $('#result').html(img.className)
};
$(function(){
   var myClass= $('.MyClass'), selected = $.data(myClass[0], 'selectedImg', null);
   myClass.find('a img').each(function(){
      $(this).hover(function(){
         $(this).addClass('hover');
         someFunction(this);//ваша функция
      }, function(){
         $(this).removeClass('hover');
         if(!$(this).hasClass('active')){
            altSomeFunction(this); //ваша вторая функция
         }
      }).click(function(){
         if(selected){
            selected.removeClass('active');
            someFunction(selected[0]);//ваша функция
         }
         $(this).addClass('active');
         altSomeFunction(this); //ваша вторая функция
         selected = $(this);
      });
   });
});
</script>
</head>
<body>
<div class="MyClass">
   <a href="#"><img class="test1" src="space.gif" style="width: 50px; margin: 10px; height: 50px; background: black;"></a>
   <a href="#"><img class="test2" src="space.gif" style="width: 50px; margin: 10px; height: 50px; background: black;"></a>
   <a href="#"><img class="test3" src="space.gif" style="width: 50px; margin: 10px; height: 50px; background: black;"></a>
</div>
<div id="result" style="color: #FFFFFF;"></div>
   <script type="text/javascript">
</script>
</body>
</html>
Web is the future ...
Аватар пользователя
Nekromancer
Модератор
 
Сообщений: 419
Зарегистрирован: 19 янв 2010, 15:06
Откуда: Молдова

Re: Выбрать все элементы кроме $(this)

Сообщение Nekromancer » 13 мар 2010, 12:18

Код: выделить все
  var img = document.getElementsByTagName('.MyClass img');

этот кусок кода вообще убил.. :shock:
Web is the future ...
Аватар пользователя
Nekromancer
Модератор
 
Сообщений: 419
Зарегистрирован: 19 янв 2010, 15:06
Откуда: Молдова


Вернуться в Вопросы от совсем новичков

Кто сейчас на форуме

Сейчас этот форум просматривают: Google [Bot] и гости: 6