Javascript.RU

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

Помогите решить вопрос
Доброго времени суток.
Проблема заключается в следующем. У нас есть вот такая страница с элементами:


По клику на один из этих элементов ему присваивается класс, но при клике на другой у первого этот класс удаляется и присваивается тому на который кликнули, и т.д.
Т.е. класс должен по клику на какой либо элемент удаляться у того элемента которому присвоен, и добавляться элементу на который кликнули. Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2014, 18:58
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<style>
      #myblock>div {
        width:30%;
        height: 50px;
        border: 2px solid #000;
        margin: 5px;
        display: inline-block;
      }
      .active {
        background-color: red;
      }
    </style>
  </head>
  
  <body>
    <div id="myblock">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <script>
      var el, target;
      myblock.onclick = function (e) {
        e = e || window.event;
        target = e.target || e.srcElement;
        if (target.id =="myblock") return;
        el && (el.className = '');
        target.className = 'active';
        el = target;
      }
    </script>
  </body>

Последний раз редактировалось Vlasenko Fedor, 18.01.2014 в 19:00.
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2014, 19:00
Новичок на форуме
Отправить личное сообщение для Peter007 Посмотреть профиль Найти все сообщения от Peter007
 
Регистрация: 18.01.2014
Сообщений: 8

Poznakomlus,
спасибо большое, а нет решения на JQuery?
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2014, 19:06
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<head>
<style>
      #myblock>div {
        width:30%;
        height: 50px;
        border: 2px solid #000;
        margin: 5px;
        display: inline-block;
      }
      .active {
        background-color: red;
      }
    </style>
    
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  </head>
  
  <body>
    <div id="myblock">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <script>
jQuery(function($){    
    $('#myblock').on('click', 'div', function () {
        $(this).addClass('active').siblings().removeClass('active'); 
    });
});
    </script>
  </body>

Последний раз редактировалось Vlasenko Fedor, 18.01.2014 в 19:12.
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2014, 22:43
Новичок на форуме
Отправить личное сообщение для Peter007 Посмотреть профиль Найти все сообщения от Peter007
 
Регистрация: 18.01.2014
Сообщений: 8

Poznakomlus, еще раз огромное спасибо. А можно ли как нибудь сделать что бы класс еще удалялся по клику на сторонний элемент, а к примеру на ссылку с классом .close
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2014, 23:08
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

не совсем понятно, что вы имеете ввиду
так
http://learn.javascript.ru/play/cghyBb
Ответить с цитированием
  #7 (permalink)  
Старый 18.01.2014, 23:10
Новичок на форуме
Отправить личное сообщение для Peter007 Посмотреть профиль Найти все сообщения от Peter007
 
Регистрация: 18.01.2014
Сообщений: 8

Poznakomlus, оно самое! Огромное спасибо!
Только кнопка находится в каждом из этих дивов, при нажатии на неё у дива удаляется класс
вот так http://learn.javascript.ru/play/sQQnxb

Последний раз редактировалось Peter007, 18.01.2014 в 23:20.
Ответить с цитированием
  #8 (permalink)  
Старый 19.01.2014, 23:44
Новичок на форуме
Отправить личное сообщение для Peter007 Посмотреть профиль Найти все сообщения от Peter007
 
Регистрация: 18.01.2014
Сообщений: 8

up
Ответить с цитированием
  #9 (permalink)  
Старый 19.01.2014, 23:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Peter007, отмените всплытие из $('div .close')
event.stopPropagation()
Ответить с цитированием
  #10 (permalink)  
Старый 20.01.2014, 00:30
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

в некоторых случаях достаточно
return false;
http://learn.javascript.ru/play/y2ixD
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пожалуйста помогите решить задачу на java alex01rus1991 Элементы интерфейса 9 27.11.2012 01:02
Ребят, помогите решить такую проблемку!!!! borcuhaworkout Элементы интерфейса 0 27.10.2012 01:26
Помогите новичку! Анатолий Саратовцев Events/DOM/Window 7 04.08.2012 17:46
Помогите решить задачку. Андрей_ Javascript под браузер 3 26.06.2012 16:21
Простой вопрос по JavaScript. Работа с датой. Помогите Hanuman Общие вопросы Javascript 3 30.07.2010 20:30