Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помогите решить вопрос (https://javascript.ru/forum/jquery/44412-pomogite-reshit-vopros.html)

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


По клику на один из этих элементов ему присваивается класс, но при клике на другой у первого этот класс удаляется и присваивается тому на который кликнули, и т.д.
Т.е. класс должен по клику на какой либо элемент удаляться у того элемента которому присвоен, и добавляться элементу на который кликнули. Заранее спасибо!

Vlasenko Fedor 18.01.2014 18:58 
<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>

Peter007 18.01.2014 19:00
Poznakomlus,
спасибо большое, а нет решения на JQuery?

Vlasenko Fedor 18.01.2014 19:06 
<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>

Peter007 18.01.2014 22:43
Poznakomlus, еще раз огромное спасибо. А можно ли как нибудь сделать что бы класс еще удалялся по клику на сторонний элемент, а к примеру на ссылку с классом .close

Vlasenko Fedor 18.01.2014 23:08
не совсем понятно, что вы имеете ввиду
так
http://learn.javascript.ru/play/cghyBb

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

Peter007 19.01.2014 23:44
up

рони 19.01.2014 23:58
Peter007, отмените всплытие из $('div .close')
event.stopPropagation()

Vlasenko Fedor 20.01.2014 00:30
в некоторых случаях достаточно
return false;
http://learn.javascript.ru/play/y2ixD


Часовой пояс GMT +3, время: 11:01.