Как убрать класс по click

165
09 июня 2018, 18:20

Имеется функция, которая добавляет класс:

$('.co1').click(function() {
    $(this).addClass("co1hover");
});

Нужно чтобы при клике на другой объект класс удалялся.
Такое написание:

$('.closew').click(function() {
    $('.co1').removeClass("co1hover");
});

не работает, хотя на вид должно. Что не так?
Или как это изобразить c помощью on('click')?

$('.co1').click(function() { 
    $(this).addClass("co1hover"); 
}); 
 
$('.closew').click(function() { 
    $('.co1').removeClass("co1hover"); 
});
body { 
  margin: 0; 
  font-family: "Open Sans"; 
  padding: 0; 
} 
:root { 
  --heightrow: calc(94vh - 2vw); 
} 
.grid1 { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 6vh calc(var(--heightrow) - 1vw); 
  overflow: hidden; 
  grid-gap: 1vw; 
} 
.hed { 
  grid-area: 1 / 1 / 1 / 5; 
  background: red; 
} 
.co1 { 
  position: relative; 
  background: #222; 
  -webkit-transition: all 0.7s cubic-bezier(.25, .8, .25, 1); 
  -moz-transition: all 0.7s cubic-bezier(.25, .8, .25, 1); 
  transition: all 0.7s cubic-bezier(.25, .8, .25, 1); 
  width: 24vw; 
} 
.co2 { 
  background: #444; 
  -webkit-transition: all 0.9s cubic-bezier(.25, .8, .25, 1); 
  -moz-transition: all 0.9s cubic-bezier(.25, .8, .25, 1); 
  transition: all 0.9s cubic-bezier(.25, .8, .25, 1); 
  width: 24vw; 
} 
.co3 { 
  background: #aaa; 
  -webkit-transition: all 1.2s cubic-bezier(.25, .8, .25, 1); 
  -moz-transition: all 1.2s cubic-bezier(.25, .8, .25, 1); 
  transition: all 1.2s cubic-bezier(.25, .8, .25, 1); 
  width: 24vw; 
} 
.co4 { 
  background: #ddd; 
} 
.co5 { 
  background: #ccc; 
  grid-area: 1 / 1 / 3 / 2; 
} 
.co6 { 
  background: #555; 
  grid-area: 2 / 2 / 2 / 5; 
} 
.co7 { 
  background: #999; 
} 
.co8 { 
  background: #aaa; 
  grid-area: 1 / 3 / 2 / 5; 
} 
.cont23 { 
  padding: 1vw 1vw 1vw 1vw; 
  position: relative; 
  z-index: 10; 
} 
.co1hover { 
  width: 47vw !important; 
  overflow: hidden; 
} 
.co1cont { 
  padding: 2rem; 
  width: 20vw; 
  -webkit-transition: all 1.2s cubic-bezier(.25, .8, .25, 1); 
  -moz-transition: all 1.2s cubic-bezier(.25, .8, .25, 1); 
  transition: all 1.2s cubic-bezier(.25, .8, .25, 1); 
} 
.closew { 
  position: absolute; 
  top: 0; 
  right: 0; 
  width: 20px; 
  height: 20px; 
  background: #fff; 
  z-index: 999; 
}
<div class="cont23"> 
  <div class="grid1"> 
    <div class="hed"></div> 
    <div class="co1"> 
      <div class="closew"></div> 
      <div class="co1cont" style="color: #ff0;"> 
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя 
        Lorem Ipsum для распечатки образцов. 
      </div> 
    </div> 
    <div class="co2"></div> 
    <div class="co3"></div> 
    <div class="co4"></div> 
  </div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Нажать на первый квадрат, закрыть на белый в правом верхнем углу.

Answer 1

Так как блок .closew находится внутри блока .co1, а всплытие события click не заблокировано, то при клике на .closew вызываются оба обработчика: сначала класс удаляется, а потом снова добавляется. Можно заблокировать всплытие события:

$('.closew').click(function() {
    $('.co1').removeClass("co1hover");
    return false;
});
READ ALSO
Задание высоты элементу после render&#39;a

Задание высоты элементу после render'a

У меня вот так выглядят товары в магазине, высота у всех разная, хочу задать высоту каждого элемента равную его ширинеПри расширении окна,...

157
Ошибка при использовании VUEX во Vue.js IE11

Ошибка при использовании VUEX во Vue.js IE11

При загрузке страницы появляется такая ошибка:

181
Не броская на первый взгляд сущность – как реализовано это шаманство?

Не броская на первый взгляд сущность – как реализовано это шаманство?

Здесь https://websemanticsuk/ размещены ссылки в виде блоков и внутри каждого блока своя иконка

186
Получение скрытых элементов JS [закрыт]

Получение скрытых элементов JS [закрыт]

Есть блок со стилем display: none;При попытке его получить через js возникает ошибка

192