Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
Человек
 Аватар для dolte
331 / 205 / 63
Регистрация: 04.02.2013
Сообщений: 1,223

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

04.03.2015, 19:12. Показов 1281. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть блок с элментами
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
Как реализовать ?
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
04.03.2015, 19:12
Ответы с готовыми решениями:

Добавление CSS к элементам
Я только начинаю изучать javascript и jquery, поэтому стопорюсь пока на мелочах. Вот сейчас попробовал удалить кое-какие свойства из CSS и...

Присваивание css-классов элементам страницы через цикл
Ниже представлен код цикла, который поочерёдно работает с каждым из элементов массива switches. Стоит задача, чтобы каждому из существующих...

Доступ к элементам формы для других классов
Есть форма с двумя textBox и одним Button. Эти элементы принадлежат классу Form1. Как сделать их доступными для другого класса?

5
171 / 153 / 67
Регистрация: 11.02.2015
Сообщений: 450
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;}
1
Человек
 Аватар для dolte
331 / 205 / 63
Регистрация: 04.02.2013
Сообщений: 1,223
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');
            });
        });
    }
})
0
171 / 153 / 67
Регистрация: 11.02.2015
Сообщений: 450
04.03.2015, 21:47
Не знаю, что там у вас, у меня FireBug молчит.
Не понял: почему у вас родительский div закрываетс внутри a?

Добавлено через 10 минут
Цитата Сообщение от dolte Посмотреть сообщение
ругается консоль
Понятно: у элемента не 1 класс.
Совет: когда просите помощь, выкладывайте полную информацию. Не надо секретничать или делать, как лучше: если бы вы знали, как лучше, вы бы не спрашивали.
1
Человек
 Аватар для dolte
331 / 205 / 63
Регистрация: 04.02.2013
Сообщений: 1,223
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;}
0
171 / 153 / 67
Регистрация: 11.02.2015
Сообщений: 450
04.03.2015, 22:13
Лучший ответ Сообщение было отмечено dolte как решение

Решение

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

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');
            });
        });
    }
})
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
04.03.2015, 22:13
Помогаю со студенческими работами здесь

Массив классов, задание и обращение к элементам через указатель
Доброе время суток!! Помогите новичку разобраться с классами! Очень надо как всегда:) Задан класс class A { int m; ...

Добавление иконок к элементам меню
Где взять иконку, если сделать, то в чем сделать и как добавить? Как вставлять стандартные

Добавление картинки к элементам ListBox
Есть список в ListBox'e ,к примеру: Севастополь Пермь Архангельск Махачкала Москва Как например добавить к итемам листбокса...

Доступ к элементам Custom DataGrid и добавление новых элементов пользователем
добрый день форумчане, я сделал кастомный datagrid, который помимо стандартых элементов имеет поле для заголовка и Панель редактирования -...

Добавление классов извне
При вложении пакета классы не компилируется в IJIDEA


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
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
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru