1

необходимо добавить класс по клику на элемент с id. почему-то не срабатывает, в чем ошибка?

<div id="change-color" class="box2">
    <div id="c1" class="cube"></div>
    <div id="c2" class="cube"></div>
    <div id="c3" class="cube"></div>
</div>

JS:

var c1 = document.getElementById('c1');
c1.addEventListener('click', cgangeBG);

function cgangeBG(){
    this.classList.toggle('pink');
}

CSS:

.pink{
    background:pink;
}

вот полный код jsfiddle

1 ответ 1

1

Проблема в расположении CSS. Так как в css описание класса .pink идет до класса .cube, то при использовании их вместе на одном элементе, свойства из класса .cude будут переписывать свойства из класса .pink. Что и происходит со свойством background

var container = document.getElementById('messages-container');
    container.onclick = function(event) {
      if (!event.target.classList.contains('remove-button')) return;
      event.target.parentNode.hidden = !event.target.parentNode.hidden;
    };
    
var c1 = document.getElementById('c1');
c1.addEventListener('click', cgangeBG);
 
function cgangeBG(){
    this.classList.toggle('pink');
}
.clear{clear:both;}
.box1 div{
  float:left;
  margin:0 1%;
}
.remove-button{
  cursor:pointer;
  text-transform:uppercase;
  border:none;
  color:#fff;
  background:#DE1111;
  font-weight:bold;
}

.box2 div{
  float:left;
  
}
.cube{ /*сначала общие настройки*/
  background:lightgrey;
  height:40px;
  width:40px;
  margin:25px 1%;
  cursor:pointer;
}
.pink{ /*потом те которые могут меняться*/
  background:pink;
}
<div id="messages-container" class="box1">
    <div>     
      <p>text1</p>
      <button class="remove-button">x</button>
    </div>
    
    <div>
      <p>tex2</p>
      <button class="remove-button">x</button>
     </div>
   
   <div>      
      <p>text3</p>
      <button class="remove-button">x</button>
    </div>
 </div>
 
 <div class="clear"></div>
 
 <div id="change-color" class="box2">
   <div id="c1" class="cube"></div>
   <div id="c2" class="cube"></div>
   <div id="c3" class="cube"></div>
 </div>

3
  • понятно. спасибо!
    – siberian
    25 дек 2015 в 6:45
  • а если добавить для всех элементов, то не работает...jsfiddle.net/lilubanana/4egqf2yt/4
    – siberian
    25 дек 2015 в 6:52
  • @MarinaVoronova, все потому, что вы опять выбираете коллекцию: var cube = document.getElementsByClassName('cube');, а addEventListener работает с конкретным элементом.
    – Grundy
    25 дек 2015 в 6:56

Ваш ответ

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

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