Как сделать чтобы иконка становилось активной на jquery? [закрыт]

165
21 сентября 2018, 20:50

Как сделать чтобы иконка становилось активной

Answer 1

$('.blocks').on('change', '.btn :checkbox', function() { 
  let element = this; 
  $('.btn :checkbox').each(function() { 
    if (this != element) { 
      this.checked = false; 
    } 
  }); 
});
.block { 
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4); 
  box-sizing: border-box; 
  margin-bottom: 38px; 
  margin-left: 15px; 
  padding: 35px 30px 30px; 
  position: relative; 
  width: 560px; 
} 
 
.title { 
  color: #242729; 
  display: inline-block; 
  font: 19px/1em Verdana, sans-serif; 
} 
 
.text { 
  color: #242729; 
  display: inline-block; 
  font: 16px/1.6em Arial, sans-serif; 
  padding-top: 18px; 
  text-align: justify; 
} 
 
.btn>div { 
  background: url(https://i.stack.imgur.com/nN7gj.png) -516px -34px no-repeat; 
  border-radius: 50%; 
  display: inline-block; 
  height: 37px; 
  left: 492px; 
  position: absolute; 
  top: 25px; 
  transition: all 0.4s ease-in; 
  width: 37px; 
  -webkit-filter: grayscale(0.9) opacity(0.5); 
  filter: grayscale(0.9) opacity(0.5); 
} 
 
.btn>input { 
  display: none; 
} 
 
.btn>div:hover { 
  transition: all 0.7s ease-in-out; 
  -webkit-filter: grayscale(0.1) opacity(0.9); 
  filter: grayscale(0.1) opacity(0.9); 
} 
 
.btn>input:checked+div { 
  transform: rotate(315deg); 
  transition: all 1.0s ease-in-out; 
  -webkit-filter: hue-rotate(128deg); 
  filter: hue-rotate(128deg); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="blocks"> 
  <div class="block"> 
    <div class="title">Кнопки которые активируют функции?</div> 
    <label class="btn"><input type="checkbox"><div></div></label> 
    <div class="text">Функции можно активировать кнопками мыши или клавиатуры, нажав их в нужном сочетании. Также, незастёгнутые кнопки на куртке могут деактивировать жизненные функции. А вот кнопка, положеная на стул, может активировать так, что функционировать будет 
      часа два-три.</div> 
  </div> 
  <div class="block"> 
    <div class="title">Как реализовать это на jquery</div> 
    <label class="btn"><input type="checkbox"><div></div></label> 
    <div class="text">JQuery нужно использовать там, где это действительно необходимо. Но, раз надо, так надо...</div> 
  </div> 
  <div class="block"> 
    <div class="title">Lorem Ipsum</div> 
    <label class="btn"><input type="checkbox"><div></div></label> 
    <div class="text">это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</div> 
  </div> 
</div>

READ ALSO
Как сделать такой эффект при ховере? [закрыт]

Как сделать такой эффект при ховере? [закрыт]

Справа нормальный вид, слева при ховере

140
Как отличить события клика по элементу от его перетаскивания?

Как отличить события клика по элементу от его перетаскивания?

Имеется <div class="needsToMove"> на страницеЧерез js добавили метод

172
Как изменить отдельную ячейку в таблице на странице (HTML)?

Как изменить отдельную ячейку в таблице на странице (HTML)?

Нужно сделать чтобы пользователь на сайте мог вводить данные в БДСоздал вот такую таблицу: С библиотекой jQuery сделал ввод данных в таблицу,...

193