Добавление классов к элементам

@dolte · Регистрация: 04.02.2013

Студворк — интернет-сервис помощи студентам

Есть блок с элментами

HTML5
1
2
3
4
5
6
<div class="movePanel">
<a class="elem1"></a>
<a class="elem2"></a>
<a class="elem3"></a>
<a class="elem4"></a>
</div>

Есть второй блок с элеметами

HTML5
1
2
3
4
5
<div class="itemSelect">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>

Как задумано.

Кликаем на item1 или item3 у нас присваивается класс select только к элементу elem2
Кликаем на item1 или item2 у нас присваивается класс select только к элементу elem1
Кликаем на item2 или item3 у нас присваивается класс select только к элементу elem3

Как реализовать ?

@nrobert · 04.03.2015, 20:59

Все-таки при клике на item1 какому элементу присвоится класс select? 1 и 2?

Если так, то см пример.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table class="moveTable">
<tr>
    <td width="225px" valign="top" align="left">
        <div class="movePanel">
            <div style="margin-left:14px;">
            <a href="javascript:void(0);" class="hi-icon bluemini elem1" style="margin-top: 29px!important;"><div class="blueminiico1">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem2" style="margin: 0px 53px;"><div class="blueminiico2">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem3" style="margin: 0px 53px;"><div class="blueminiico3">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem4" style="margin: 0px 53px;"><div class="blueminiico4">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem5" style="margin: 0px 53px;"><div class="blueminiico5"></div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem6" style="margin: 0px 53px;"><div class="blueminiico6">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem7" style="margin: 0px 53px;"><div class="blueminiico7">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem8" style="margin: 0px 53px;"><div class="blueminiico8">1</div></a>
            </div>
        </div>
    </td>
    <td valign="top" align="left" style="line-height:34px;">        
        <div class="list_item item1">Автосервис, автотовары</div>
        <div class="list_item item2">Автосалон</div>
        <div class="list_item item3">Аптека</div>
    </td>
</tr>
</table>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function(){
    var obj={'1':['1','2'],'2':['1','3'],'3':['2','3']},key;
    for(key in obj){
        $('div.item'+key).on('click',function(){
            $('a').children('div').removeClass('select');
            var div=$(this).attr('class');
            div=div.split(' ');
            for(i=0;i<div.length;i++){
                if(div[i].indexOf('item')==0){
                    div=div[i].replace('item','');
                    break;
                }
            }
            $.each(obj[div],function(index,value){
                $('a.elem'+value).children('div').addClass('select');
            });
        });
    }
})

CSS
1
.select{background:red;}

@dolte · 04.03.2015, 21:28 **[ТС]**

nrobert, Вот именно, что и к тому и к тому.

В вашем примере то, что нужно, но у меня ругается консоль

(anonymous function)
$.each(obj[div],function(index,value){
и
Uncaught TypeError: Cannot read property 'length' of undefined

Добавлено через 3 минуты
Вот моя структура

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="movePanel">
            <div>
            <a href="javascript:void(0);" class="hi-icon bluemini elem1"><div class="blueminiico1"></div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem2"><div class="blueminiico2"></div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem3"><div class="blueminiico3"></div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem4"><div class="blueminiico4"></div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem5"><div class="blueminiico5"></div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem6"><div class="blueminiico6"></div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem7"><div class="blueminiico7"></div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem8"><div class="blueminiico8"></div></a>
            </div>
        </div>

HTML5
1
2
3
4
5
<div class="list_item item1"></div>
<div class="list_item item2"></div>
<div class="list_item item3"></div>
<div class="list_item item4"></div>
<div class="list_item item5"></div>

вот измененный скрипт

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
    var obj={'1':['1','2'],'2':['1','3'],'3':['2','3']},key;
    for(key in obj){
        $('.list_item.item'+key).on('click',function(){
            $('a.hi-icon.bluemini').removeClass('select');
            var div=$(this).attr('class').replace('item','');
            $.each(obj[div],function(index,value){
                $('a.hi-icon.bluemini.elem'+value).addClass('select');
            });
        });
    }
})

@nrobert · 04.03.2015, 21:47

Не знаю, что там у вас, у меня FireBug молчит.
Не понял: почему у вас родительский div закрываетс внутри a?

Добавлено через 10 минут

Сообщение от dolte

ругается консоль

Понятно: у элемента не 1 класс.
Совет: когда просите помощь, выкладывайте полную информацию. Не надо секретничать или делать, как лучше: если бы вы знали, как лучше, вы бы не спрашивали.

@dolte · 04.03.2015, 21:54 **[ТС]**

nrobert, я не секретничал, просто не думал что это повлияет, впредь буду делать по нормальному.

вот оригинальный код

http://jsfiddle.net/xjmjb1f1/2/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<table class="moveTable">
<tr>
    <td width="225px" valign="top" align="left">
        <div class="movePanel">
            <div style="margin-left:14px;">
            <a href="javascript:void(0);" class="hi-icon bluemini elem1" style="margin-top: 29px!important;"><div class="blueminiico1">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem2" style="margin: 0px 53px;"><div class="blueminiico2">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem3" style="margin: 0px 53px;"><div class="blueminiico3">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem4" style="margin: 0px 53px;"><div class="blueminiico4">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem5" style="margin: 0px 53px;"><div class="blueminiico5"></div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem6" style="margin: 0px 53px;"><div class="blueminiico6">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem7" style="margin: 0px 53px;"><div class="blueminiico7">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem8" style="margin: 0px 53px;"><div class="blueminiico8">1</div></a>
            </div>
        </div>
    </td>
    <td valign="top" align="left" style="line-height:34px;">
        
        <div class="list_item item1">Автосервис, автотовары</div>
        <div class="list_item item2">Автосалон</div>
        <div class="list_item item3">Аптека</div>
        <!--<div class="list_item item4">Город, ЖКХ</div>
        <div class="list_item item5">Гостиницы, отели, хостелы</div>
        <div class="list_item item6">Государственные организации</div>
        <div class="list_item item7">Детские товары</div>
        <div class="list_item item8">Дизайн интерьера</div>
        <div class="list_item item9">Досуг, развлечения</div>
        <div class="list_item item10">Кафе, бары, рестораны</div>
        <div class="list_item item11">Компьютеры и бытовая техника</div>
        <div class="list_item item12">Культура и искусство</div>
        <div class="list_item item13">Магазин товаров повседневного спроса</div>
        <div class="list_item item14">Мебель, материалы, фурнитура</div>
        <div class="list_item item15">Медицина, здоровье, стоматологические центры</div>
        <div class="list_item item16">Металлы, топливо, химия</div>
        <div class="list_item item17">Наука</div>
        <div class="list_item item18">Недвижимость</div>
        <div class="list_item item19">Оборудование, инструмент</div>
        <div class="list_item item20">Оборудование, сырье, материалы</div>
        <div class="list_item item21">Образование</div>
        <div class="list_item item22">Одежда, обувь</div>
        <div class="list_item item23">Подарки для любимых</div>
        <div class="list_item item25">Промышленность</div>
        <div class="list_item item26">Ремонт квартир и офисов</div>
        <div class="list_item item28">Риэлторские услуги</div>
        <div class="list_item item29">Салон красоты, wellness club, фитнес-центр</div>
        <div class="list_item item30">Строительство, недвижимость, ремонт</div>
        <div class="list_item item31">Телекоммуникации, связь, интернет</div>
        <div class="list_item item32">Техника для дома и офиса</div>
        <div class="list_item item33">Туризм, турфирмы</div>
        <div class="list_item item34">Товары для животных</div>
        <div class="list_item item35">Транспорт, грузоперевозки</div>
        <div class="list_item item36">Услуги для бизнеса</div>
        <div class="list_item item37">Цветочный магазин</div>
        <div class="list_item item38">Финансы, страхование, инвестиции</div>
        <div class="list_item item40">Юридические услуги, финансовые, бизнес услуги</div>-->
    
            </td>
</tr>
</table>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
    var obj={'1':['1','2'],'2':['1','3'],'3':['2','3']},key;
    for(key in obj){
        $('.item'+key).on('click',function(){
            $('a').removeClass('select');
            var div=$(this).attr('class').replace('item','');
            $.each(obj[div],function(index,value){
                $('a.elem'+value).addClass('select');
            });
        });
    }
})

CSS
1
2
.select{background:red;}
a,div{margin:10px;}

@nrobert · 04.03.2015, 22:13

Обновил пример.

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table class="moveTable">
<tr>
    <td width="225px" valign="top" align="left">
        <div class="movePanel">
            <div style="margin-left:14px;">
            <a href="javascript:void(0);" class="hi-icon bluemini elem1" style="margin-top: 29px!important;"><div class="blueminiico1">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem2" style="margin: 0px 53px;"><div class="blueminiico2">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem3" style="margin: 0px 53px;"><div class="blueminiico3">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem4" style="margin: 0px 53px;"><div class="blueminiico4">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem5" style="margin: 0px 53px;"><div class="blueminiico5"></div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem6" style="margin: 0px 53px;"><div class="blueminiico6">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem7" style="margin: 0px 53px;"><div class="blueminiico7">1</div></a>
            <a href="javascript:void(0);" class="hi-icon bluemini elem8" style="margin: 0px 53px;"><div class="blueminiico8">1</div></a>
            </div>
        </div>
    </td>
    <td valign="top" align="left" style="line-height:34px;">        
        <div class="list_item item1">Автосервис, автотовары</div>
        <div class="list_item item2">Автосалон</div>
        <div class="list_item item3">Аптека</div>
    </td>
</tr>
</table>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function(){
    var obj={'1':['1','2'],'2':['1','3'],'3':['2','3']},key;
    for(key in obj){
        $('div.item'+key).on('click',function(){
            $('a').children('div').removeClass('select');
            var div=$(this).attr('class');
            div=div.split(' ');
            for(i=0;i<div.length;i++){
                if(div[i].indexOf('item')==0){
                    div=div[i].replace('item','');
                    break;
                }
            }
            $.each(obj[div],function(index,value){
                $('a.elem'+value).children('div').addClass('select');
            });
        });
    }
})

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

Добавление классов к элементам

Решение