1

Доброго времени суток. Задача: при наведении на элемент списка(li) рядом с ним должна появляться метка желтого цвета, а при нажатии на него метка должна ставится или сниматься. Я добавил внутрь элемента списка span и дал ему стили. Не совсем понимаю как обратится к дочернему элементу списка(span), что бы метка появлялась только у того элемента, на который нажал, а не у всех сразу. Так же, надо что бы на Скрин https://prnt.sc/iaay1l

Прошу подсказать как обратиться только к дочернему элементу, а не ко всем элементам с таким же классом.

ul {
  width: 350px;
}

.sorting_main {
  font-weight: 500;
  font-family: "Roboto", sans-serif;
}

.sorting_type__list,
.sorting_amount__list {
  text-transform: capitalize;
  color: #000;
  cursor: pointer;
}

.sorting_type__list:hover .checked-mark,
.sorting_amount__list:hover .checked-mark {
  display: inline-block;
}

.checked-mark {
  display: none;
  width: 10px;
  height: 10px;
  background: #e6b738;
  border-radius: 1em;
  float: right;
  margin-top: 7px;
  margin-right: 10px;
}
<ul class="type">
  <li class="sorting_main sorting_type__list">Тип объекта <i class="fas fa-caret-down"></i></li>
  <li class="sorting_type__list" value="apartment">квартира <span class="checked-mark"></span></li>
  <li class="sorting_type__list" value="room">комната <span class="checked-mark"></span></li>
  <li class="sorting_type__list" value="house">дом <span class="checked-mark"></span></li>
  <li class="sorting_type__list" value="cottage">коттедж <span class="checked-mark"></span></li>
</ul>

6
  • this тебе в помощь
    – Air
    5 фев 2018 в 9:50
  • Я понимаю что надо использовать this, но я не знаю как обратиться исключительно к дочернему элементу, а не ко всем DOM-элементам с таким же классом. $('.list_item__class').click(function(){ $(this).и дальше не знаю как написать });
    – Dissarion
    5 фев 2018 в 9:54
  • покажи весь код
    – Air
    5 фев 2018 в 9:55
  • $(this).children'('span') 5 фев 2018 в 10:00
  • @Air Вот код codepen.io/anon/pen/qxZedw#anon-signup
    – Dissarion
    5 фев 2018 в 10:08

1 ответ 1

2

Вы имеете ввиду что-то типа такого?

$(".element").click(
  function() {
    var element = $(this).hasClass("active")
    if (element) {
      $(this).removeClass("active")
    } else {
      $(this).addClass("active")
    }
  }
);
.element {
  list-style-type: none;
  position: relative;
  border: 1px solid #000;
}

.element span {
    display: none;
    background-color: #fc0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.element:hover > span {
  display: inline-block;
}
.active span {
    display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="element">1 <span></span></li>
  <li class="element">2 <span></span></li>
  <li class="element">3 <span></span></li>
</ul>

1
  • Именно оно, большое спасибо
    – Dissarion
    5 фев 2018 в 10:20

Ваш ответ

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

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