0

На странице есть аудиоплеер с плейлистом, в котором каждый трек - ссылка <a href="..." class="play-item">...</a>, при нажатии на которую он играет. На странице есть ещё одна ссылка, для перехода на другую страницу, типа <a href="..." class="readmore">Туда</a>. Я хотел бы запретить нажатие ссылки .readmore, если не выбран трек в плейлисте, т.е., если не нажата ни одна ссылка .play-item. Как это сделать средствами js? Спасибо!

3
  • pointer-events: none пробовали? 23 окт 2019 в 6:05
  • @StrangerintheQ боюсь, это будет не кроссбраузерно
    – Alexashka
    23 окт 2019 в 6:09
  • откуда такие опасения? 23 окт 2019 в 6:11

1 ответ 1

3

Вот банально простой пример с использованием флагов.Для того чтобы просто понять суть.Если одно из элементов списка не нажато то красную кнопку либо ссылку нажать будет невозможно.

И а надо заменить на span ну или любой другой подходящий тег.

const testEl = document.querySelectorAll(".test"),
   red = document.getElementById("red"),
   link = document.getElementById("link");
   
let flag = false;

link.onclick = _ => {
  flag ? window.location = "https://www.google.ru/" : null;
}

testEl.forEach(el => {
  el.onclick = _ => {
      flag !== true ? (flag = true , red.innerHTML = "Now clickable") : null;
  };
});

red.onclick = _ => {
  flag ? red.classList.add("red") : null;
}
.red {
  background:red;
}
#link {
  color:blue;
  text-decoration:underline;
}
<ul>
    <li class="test">test 1</li>
    <li class="test">test 2</li>
    <li class="test">test 3</li>
</ul>

<button id="red">Not clickable</button>

<span id="link">link</span>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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