Помогите со скриптом пожалуйста

Question

Есть код:

<ul>
  <li class " item item-current">
    <a class "link link-current">
  </li>
  <li class "item">
    <a class "link">
  </li>
</ul>

Нужно, чтобы при нажатии на любую ссылку с классом "link", ее класс дополнялся "-current", а у действующей удалялся и то же происходило с родительским элементом.

Получается только у ссылки класс поменять:

$(".link").click(function(e) {
  e.preventDefault();
  $(".link").removeClass('link--current');
  $(this).addClass('link--current');
})

Answer 1

вот решение вашей задачи:

Array.from(document.links).forEach((link) => {
  link.addEventListener('click',function(e){
    document.querySelector('.link-current').className = 'link';
    this.className = 'link-current'}
)});

.link{
  color:red;
}
.link-current{
  color:lime;
}
.link:visited{
  color:red;
}
.link-current:visited{
  color:lime;
}

<ul>
  <li class="item-current">
    <a href="#" class="link-current">Ссылка</a>
  </li>
  <li class="item">
    <a href="#" class="link">Ссылка с классом link</a>
  </li>
  <li class="item">
    <a href="#" class="link">Ссылка с классом link</a>
  </li>
</ul>

Answer 2

Вариант на jQuery

$('.item').on('click', function(){ // При нажатии на класс .item, выполняем следующее:
  if(!$(this).hasClass('item-current')) { // Проверяем активна ли нажатая ссылка, чтобы не выполнять действие снова, если нет, то выполняем следующий код:
    $('.item.item-current').removeClass('item-current'); // Ищем активную ссылку и удаляем активный класс
    $(this).addClass('item-current'); // Текущей, нажатой ссылке, добавляем класс.
  }
  return false;
});

/* А чтобы не вешать классы на дочернии элементы - воспользуйтесь CSS */

.item.item-current {
  background: green;
}

.item.item-current a {
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li class="item item-current">
    <a class="link">Ссылка</a>
  </li>
  <li class="item">
    <a class="link">Ссылка</a>
  </li>
  <li class="item">
    <a class="link">Ссылка</a>
  </li>
  <li class="item">
    <a class="link">Ссылка</a>
  </li>
  <li class="item">
    <a class="link">Ссылка</a>
  </li>
</ul>

И да, атрибут с каким-то параметром всегда выглядит так - attr="param", по этому добавьте вашим атрибутам знак =(равно) между атрибутом и параметром.

И у элемента <a> должен быть закрывающий тег </a>

Исправленный ваш ответ

$(".link").click(function(event) {
  event.preventDefault();
  $(".link").removeClass('link--current');
  $(".link").parent().removeClass('item--current');
  $(this).addClass('link--current');
  $(this).parent().addClass('item--current');
});

.link--current {
  color: #fff;
}

.item--current {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item item--current">
    <a href="#" class="link link--current">ссылка</a>
  </li>
  <li class="item">
    <a href="#" class="link">ссылка</a>
  </li>
  <li class="item">
    <a href="#" class="link">ссылка</a>
  </li>
</ul>

Answer 3

Спасибо за ответы и помощь. На счет "орфографии", не думал, что это так принципиально, старался передать суть, вопрос то по сути понятен был, но учту на будущее. С самим вопросом разобрался следующим способом:

<ul>
  <li class="item item--current">
    <a href="#" class="link link--current">ссылка</a>
  </li>
  <li class="item">
    <a href="#" class="link">ссылка</a>
  </li>
  <li class="item">
    <a href="#" class="link">ссылка</a>
  </li>
</ul>

 $(".link").click(function(event) {
  event.preventDefault();
  $(".link").removeClass('link--current');
  $(this).addClass('link--current');
 }) 
 
 $(".link").click(function(event) {
  event.preventDefault();
  $(".link").parent().removeClass('item--current');
  $(this).parent().addClass('item--current');
 })

БЛОГ НА HUSL

Помогите со скриптом пожалуйста

Ответы (3 шт):