Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.02.2017, 12:55
Аспирант
Отправить личное сообщение для kingstakh Посмотреть профиль Найти все сообщения от kingstakh
 
Регистрация: 21.02.2014
Сообщений: 37

Смена div по клику
Доброго всем! Есть такой пример, отлично работает, но только с одной парой div:

<div id="left"><span>Левый - Правый</span><span>Поменять</span></div>  
<div id="right"><span>Правый - Левый</span><span>Поменять</span></div>


$(function(){

    $('#right').hide();
    $('div').click(function(){
        $('div').toggle();
    });

});


Проблема в том, что нужно применить эту функцию к группе div с разными id, чтобы при клике по "Поменять" менялась только группа с одинаковым индексом в id:

<div id="left-1"><span>Левый - Правый</span><span>Поменять</span></div>  
<div id="right-1"><span>Правый - Левый</span><span>Поменять</span></div> 
<div id="left-2"><span>Левый - Правый</span><span>Поменять</span></div>  
<div id="right-3"><span>Правый - Левый</span><span>Поменять</span></div> и т.д.


Ну или может есть другой вариант, спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 20.02.2017, 13:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от kingstakh
может есть другой вариант
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.check:checked ~ .right {
    display:  inline-block;
  }
.check ~ .right, .check:checked ~ .left, .check{
    display: none;
  }

  </style>

</head>

<body>
<label>
    <input class="check" type="checkbox" name="test">
    <span class="left">Левый - Правый</span>
    <span class="right">Правый - Левый</span>
    <span>Поменять</span>
</label>


</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 20.02.2017, 13:58
Аспирант
Отправить личное сообщение для kingstakh Посмотреть профиль Найти все сообщения от kingstakh
 
Регистрация: 21.02.2014
Сообщений: 37

Здорово! Спасибо! А есть ограничения по браузерам и версиям?
Ответить с цитированием
  #4 (permalink)  
Старый 20.02.2017, 14:07
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от kingstakh
А есть ограничения по браузерам и версиям?
Селектор "~" не будет работать на старье... CSS3 only.
http://htmlbook.ru/css/selector/sibling

Последний раз редактировалось ksa, 20.02.2017 в 14:09.
Ответить с цитированием
  #5 (permalink)  
Старый 20.02.2017, 14:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от kingstakh
или может есть другой вариант
textToggle
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Раскрытие не полностью раскрытого div по клику MrNix21 Элементы интерфейса 2 28.03.2016 14:41
Смена фонового изображения по кругу, по клику на одну кнопку Manoftheyear Элементы интерфейса 7 21.03.2016 06:45
Закрыть div по клику вне его пределов armidow Элементы интерфейса 1 18.03.2016 18:19
Смена класса у отдельного div при нажатии на ссылку Maxim-Ra Элементы интерфейса 6 15.02.2015 12:20
Как переписать div по клику по нему Lewik Общие вопросы Javascript 3 08.05.2012 22:27