0

Есть несколько одинаковых блоков div сгенерированных циклом:

<div class="boxWithDataToday" onclick="postDate('@day')">
    ...
</div>

Есть css для него:

.boxWithDataToday {
    min-height: 52px;
    background-color:#2689ae;
    color: #fff;
    padding: 3px 0 0 5px;
    border-radius:3px;
    border: 1px solid #b2b2b2;
}

Нужно сделать чтобы при нажатии на один блок его фон становился красным, а всех остальных дефолтным. Можно ли это сделать без js? если нет, то хотя бы с js.

3 ответа 3

1

Что бы не заморачиваться используйте Jquery

var boxes = $('.boxWithDataToday');

boxes.click(function () {
    boxes.removeClass('active');
    $(this).addClass('active');
})
div {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

.boxWithDataToday {
    min-height: 52px;
    background-color:#2689ae;
    color: #fff;
    padding: 3px 0 0 5px;
    border-radius:3px;
    border: 1px solid #b2b2b2;
}

.boxWithDataToday.active {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- обработчик onclick на теге все равно будет работать -->
<div class='boxWithDataToday' onclick="alert(1)"></div>
<div class='boxWithDataToday'></div>
<div class='boxWithDataToday'></div>
<div class='boxWithDataToday'></div>
<div class='boxWithDataToday'></div>

7
  • да, при нажатии у этого блока становится красным, на этом спасиобо НО мне нужно чтобы у всех остальных блоков (у меня их 10 штук) фон становился обратно каким был изначально. Тоесть я нажал на блок1 - он стал красным, нажал на блок2 - он стал красным, а блок1 стал обычнм 9 июн 2017 в 6:32
  • @a.tarasevich, понятно, сейчас исправлю тогда
    – ThisMan
    9 июн 2017 в 6:32
  • Мне кажется автор не спроста использует повешенный на элемент обработчик клика postDate('@day'), может он рендерится на сервер сайде для каждого элемента отдельно, а вы от него взяли и так просто избавились...
    – MihailPw
    9 июн 2017 в 6:43
  • Да, postDate постит информацию с блока на сервер. Почему-то не работает ваш пример.. странно.. 9 июн 2017 в 6:47
  • Все, разобрался, спасибо! 9 июн 2017 в 6:48
1

При клике все элементы .boxWithDataToday закрашиваем дефолтным цветом и тут же элемент, на который клинкули красим в красный.

function boxWithDataTodayClick(el, date) {
 document.querySelectorAll('.boxWithDataToday').forEach(function (el) { el.style.backgroundColor = '#2689ae'});
 el.style.backgroundColor = 'red';
 //postDate(date);
}
div {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.boxWithDataToday {
  min-height: 52px;
  background-color: #2689ae;
  color: #fff;
  padding: 3px 0 0 5px;
  border-radius: 3px;
  border: 1px solid #b2b2b2;
}
<div class="boxWithDataToday" onclick="boxWithDataTodayClick(this, '@day')"></div>
<div class="boxWithDataToday" onclick="boxWithDataTodayClick(this, '@day')"></div>
<div class="boxWithDataToday" onclick="boxWithDataTodayClick(this, '@day')"></div>
<div class="boxWithDataToday" onclick="boxWithDataTodayClick(this, '@day')"></div>

-1

Попробуйте по событию .click(), всем блокам с этим классом задать дефолтные значения с помощью - .css({}), а блоку на котором произведено нажатие, задать изменения вот так - $(this).css({}).

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.