Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.11.2015, 22:52
Новичок на форуме
Отправить личное сообщение для ur5fit Посмотреть профиль Найти все сообщения от ur5fit
 
Регистрация: 19.11.2015
Сообщений: 5

Добавление класса из атрибута в BODY
немножко на говнокодил себе заготовку может кому то пригодится

суть такая: по клику, двойному клику, и на hover добавляется/убирается класс у BODY прописанный в атрибутах объекта . так намного гибче можно теперь добраться до всех элемента или до группы смотрите пример.
За код не ругайте а поправляйте

https://github.com/ur5fot/data-click-to-toggle-class
http://codepen.io/ur5fot/pen/Lpaogv

Последний раз редактировалось ur5fit, 19.11.2015 в 23:54.
Ответить с цитированием
  #2 (permalink)  
Старый 20.11.2015, 00:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

ur5fit,
зачем return?
https://github.com/ur5fot/data-click...ddClass.js#L15
почему бы не остановить цикл break
https://github.com/ur5fot/data-click...ddClass.js#L38

и нельзя создать множество независимых пар? или можно?
Ответить с цитированием
  #3 (permalink)  
Старый 20.11.2015, 11:49
Новичок на форуме
Отправить личное сообщение для ur5fit Посмотреть профиль Найти все сообщения от ur5fit
 
Регистрация: 19.11.2015
Сообщений: 5

за return надо обдумать но без него работает нормально.

извинение не понял "и нельзя создать множество независимых пар? или можно?".

надо теперь написать для для свап, долгом нажатии, для мобильных устройств

Последний раз редактировалось ur5fit, 20.11.2015 в 13:47.
Ответить с цитированием
  #4 (permalink)  
Старый 20.11.2015, 12:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Сообщение от ur5fit
извинение не понял "нельзя создать множество независимых пар".
три спойлера -- три ссылки каждая открывает свой div - можно?
Ответить с цитированием
  #5 (permalink)  
Старый 20.11.2015, 14:16
Новичок на форуме
Отправить личное сообщение для ur5fit Посмотреть профиль Найти все сообщения от ur5fit
 
Регистрация: 19.11.2015
Сообщений: 5

да суть такая (подсмотрена в WordPress) : у нас есть элементы у которых прописаны атрибуты data-click='click' или data-dblclick='dblclick'или data-hover='hover' , если произошло событие click, dblclick, hover то доставляется класс BODY за писаный в атрибуте соответствующему событию. мы пишем :
<div data-click='click'>data-click='click'</div>
<div data-dblclick='dblclick'>data-dblclick='dblclick'</div>
 <div data-hover='hover'>data-hover='hover'</div>

<div class="class1">click</div>
<div class="class2">dblclick</div>
<div class="class3">hover</div>

.click .class1{ 
    margin-top: 0px;
    opacity: 1;
}
.dblclick .class2{
    top: 100px;
}
.hover .class3{
    height: 100px;
    width: 100px;
    background: fuchsia;
    border-radius: 50%;
}


в атрибуты мы можем записывать любые классы
можно управлять группой элементов так:
.click .class1,  .class2, .class3, .class4, .class5{ 
    margin-top: 0px;
    opacity: 1;
}


или только некоторыми делать все что позволяет css

вот три спойлера -- три ссылки каждая открывает свой div - можно? (но тут нужно будет отменить переход по ссылке)
<a data-click='spoiler1' href='#'>spoiler1</a>
<a  data-click='spoiler2' href='#'>spoiler2</a>
 <a  data-click='spoiler3' href='#'>spoiler3</a>

<div class="class1">spoiler1 open</div>
<div class="class2">spoiler2 open</div>
<div class="class3">spoiler3 open</div>

.class1{ 
    display: none;
}
spoiler1 .class1  { 
    display: block;
}
 .class2{ 
    display: none;
}
spoiler1 .class2  { 
    display: block;
}
 .class3{ 
    display: none;
}
spoiler1 .class3  { 
    display: block;
}

Последний раз редактировалось ur5fit, 20.11.2015 в 17:43.
Ответить с цитированием
  #6 (permalink)  
Старый 20.11.2015, 14:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

ur5fit,
ок
Ответить с цитированием
  #7 (permalink)  
Старый 20.11.2015, 20:23
Новичок на форуме
Отправить личное сообщение для ur5fit Посмотреть профиль Найти все сообщения от ur5fit
 
Регистрация: 19.11.2015
Сообщений: 5

не много подправил код
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление класса с анимацией. xTODx Элементы интерфейса 2 11.05.2015 10:24
Добавление класса всем родительским элементам списка Torawhite Элементы интерфейса 0 01.05.2015 22:06
Использование классов в JavaScript devote Ваши сайты и скрипты 70 01.02.2013 17:17
Добавление атрибута к ссылке с классом stereomaniac1 Общие вопросы Javascript 1 25.01.2012 16:53
Динамическое добавление события keydown элементу body Arigato Events/DOM/Window 3 13.12.2011 22:38