Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2011, 18:52
Аспирант
Отправить личное сообщение для [MI_nor] Посмотреть профиль Найти все сообщения от [MI_nor]
 
Регистрация: 24.05.2010
Сообщений: 31

Обратится по классу
К сожалению не смог правильно задать вопрос гуглу, ищу телепатов

Суть в том что на сайте есть несколько участков, имеющих следующий вид:
Код:
<div class="pole">
<label>
<a class="none"></a>
</label>
</div>
Мне необходимо чтобы при собитии OnMouseOver на блок div с соответствующим классом цвет ссылки менялся. Как обращаться к тегу по id я знаю, но как обратиться к тегу по классу?
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2011, 19:12
Аватар для Vulkan
Профессор
Отправить личное сообщение для Vulkan Посмотреть профиль Найти все сообщения от Vulkan
 
Регистрация: 25.05.2010
Сообщений: 511

Вот наводите на див, будет меняться цвет ссылки:
<script type="text/javascript">
window.onload = function () {
    var div = document.getElementsByClassName('pole')[0];
    div.onmouseover = function () {
        var a = div.getElementsByClassName('none')[0];
        a.style.color = (a.style.color == '#000000' ? '#ff0000' : '#000000');
    }
}
</script>

<div class="pole" style="width: 100px; height: 100px; border: 1px black solid;">
<label>
<a class="none" style="color: #000000;">ссылка</a>
</label>
</div>
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2011, 19:34
Аспирант
Отправить личное сообщение для [MI_nor] Посмотреть профиль Найти все сообщения от [MI_nor]
 
Регистрация: 24.05.2010
Сообщений: 31

Пример немного не работает в фф =)
З.Ы И почему именно [0] див? разве он тогда не возьмет только самый ранний?
Ответить с цитированием
  #4 (permalink)  
Старый 22.01.2011, 19:40
Аватар для Vulkan
Профессор
Отправить личное сообщение для Vulkan Посмотреть профиль Найти все сообщения от Vulkan
 
Регистрация: 25.05.2010
Сообщений: 511

[MI_nor], фф скорее всего не так цвета обрабатывает, на счёт [0] не помню, но пример без указания индекса не сработает.
Ответить с цитированием
  #5 (permalink)  
Старый 22.01.2011, 19:48
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Vulkan, все проще, ваш вариант не кроссбраузерный:
<script type="text/javascript">
window.onload = function() {
    var getElementsByClassName = function(getClass){
        if(document.querySelectorAll) {
            return document.querySelectorAll("." + getClass);
        }
        else if(document.getElementsByClassName) {
            return document.getElementsByClassName(getClass);
        }
        else {
            var list = document.getElementsByTagName('*'), i = list.length,
            classArray = getClass.split(/\s+/), result = [];
            while(i--) {
                if(list[i].className.search('\\b' + classArray + '\\b') != -1) {
                    result.push(list[i]);
                }
            }
            return result;
        }
    };
    
    var handler = ['mouseover','mouseout'], i = handler.length;
    
    while(i--) {
        getElementsByClassName('class')[0]['on'+handler[i]] = function () {
        this.style.color = this.style.color == '' ? '#ff0000' : '';
        }
    }
};
</script>
<a href="#" class="class">ссылка</a>

Последний раз редактировалось monolithed, 22.01.2011 в 20:03.
Ответить с цитированием
  #6 (permalink)  
Старый 22.01.2011, 19:59
Аватар для Vulkan
Профессор
Отправить личное сообщение для Vulkan Посмотреть профиль Найти все сообщения от Vulkan
 
Регистрация: 25.05.2010
Сообщений: 511

monolithed, точно, совсем забыл про особенности getElementsByClass, забыл про кроссбраузерную реализацию.
Ответить с цитированием
  #7 (permalink)  
Старый 22.01.2011, 20:42
Аспирант
Отправить личное сообщение для [MI_nor] Посмотреть профиль Найти все сообщения от [MI_nor]
 
Регистрация: 24.05.2010
Сообщений: 31

monolithed, Но суть остается, ваш вариант тоже лишь для одного тега, но их несколько
Ответить с цитированием
  #8 (permalink)  
Старый 22.01.2011, 21:10
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от [MI_nor
Но суть остается, ваш вариант тоже лишь для одного тега, но их несколько
а по конкретней можно?

Если вы об этом, то все просто решается:
<script type="text/javascript">
window.onload = function() {
    var getElementsByClassName = function(getClass){

        if(document.querySelectorAll) {
            return document.querySelectorAll("." + getClass);
        }

        else if(document.getElementsByClassName) {
            return document.getElementsByClassName(getClass);
        }

        else {
            var list = document.getElementsByTagName('*'), i = list.length,
                 classArray = getClass.split(/\s+/), 
                 result = [];

            while(i--) {
                if(list[i].className.search('\\b' + classArray + '\\b') != -1) {
                    result.push(list[i]);
                }
            }

            return result;
        }
    };
    
    var clasess = getElementsByClassName('class'), 
          i = clasess.length;
    
    while(i--) {
        getElementsByClassName('class')[i].onmouseover = function () {
            this.style.color = this.style.color == '' ? '#ff0000' : '';
        }
    }
};
</script>
<a href="#" class="class">ссылка</a>
<a href="#" class="class">ссылка</a>

Последний раз редактировалось monolithed, 22.01.2011 в 21:24.
Ответить с цитированием
  #9 (permalink)  
Старый 22.01.2011, 21:34
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,492

<style type="text/css">
.pole {background:#ddf;height:100px}
.pole:hover a {color:#f00}
</style>
<div class="pole">
<label>
<a class="none">Ссилко</a>
</label>
</div>

И делов та.
Толко ие 6 идёт лесом, но ослики как-нить переживут.)

Последний раз редактировалось Aetae, 22.01.2011 в 21:37.
Ответить с цитированием
  #10 (permalink)  
Старый 22.01.2011, 21:57
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от Aetae
Толко ие 6 идёт лесом
на последнем из проектов решил больше не поддерживать IE6, как в прочем и сами мелкомягкие (они уже года 2-3 как, я до последнего тянул)

хотя на сколько я понят, ТС'y не совсем hover нужен....

Последний раз редактировалось monolithed, 22.01.2011 в 22:00.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Textarea после ajax не могу обратится mikeles Общие вопросы Javascript 0 12.01.2011 23:02
Выборка по классу а не по ID Brankub Общие вопросы Javascript 1 29.09.2010 11:25
Как обратится к объекту AndreyKS jQuery 6 04.03.2010 20:57
Доступ к классу родителя kamvin Events/DOM/Window 1 26.11.2009 23:51