Как при клике на li зачеркивать текст, но не ссылку
По клику на кнопку добавляется ссылка в конец каждого li. Необходимо, чтобы при клике на li перечеркивался текст ссылки, но сама ссылка оставалась не перечеркнутой и доступной для клика. Я реализовал следующее:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li>Ссылка 1</li>
<li>Ссылка 2</li>
<li>Ссылка 3</li>
<li>Ссылка 4</li>
<li>Ссылка 5</li>
<li>Ссылка 6</li>
<li>Ссылка 7</li>
<li>Ссылка 8</li>
<li>Ссылка 9</li>
<li>Ссылка 10</li>
<li>Ссылка 11</li>
</ul>
<button>press me</button>
<script>
let ul = document.querySelector("ul");
let href = `<a href='#'>${"http://127.0.0.1:5500/122.html"}</a>` // ссылка для добавления в li
let lis = document.querySelectorAll("li"); // ищу все li
document.querySelector("button").addEventListener("click", function() {
for (const li of lis) {
li.innerHTML = li.textContent + ': ' + href // добавляю в каждый li ссылку
}
ul.addEventListener("click", function(event) {
let li = event.target.closest("li"); // ищу li
if (li) {
li.innerHTML = li.textContent.replace(/([А-Яа-я]+)/g, "<s>$&</s>");
// пытаюсь перечеркивать только текст ссылки, но если текст будет на английском, то замены не будет, а если в regexp добавить поиск латинские символы и цифры, то вообще идёт перечеркивание всего li, плюс ссылка перестает быть активной
}
});
});
</script>
</body>
</html>
Не могу понять: я изначально создал ошибочную логику добавления в li ссылки или мне надо доработать с regexp (например, создать отрицающий блок предварительного просмотра, который будет отменять совпадение, если встретит двоеточие)
Ответы (3 шт):
Ваша логика добавления ссылки в li
является правильной на мой взгляд, трудности по-моему возникают на этапе перечёркивания текста(?), при использовании регулярного выражения для поиска текста и его замены, сложно как то...(для меня) Я бы не стала использовать регулярное выражение в данной задаче, а сразу бы работала с DOM
, предложу такой вариант
//беру ссылку на список
const myList = document.getElementById('myList');
document.getElementById('addLinksBtn').addEventListener('click', function() {
//прохожу по li внутри моего myList
myList.querySelectorAll('li').forEach(li => {
//проверяю, как же без проверки, и добавляю, если нету ссылку
if (!li.querySelector('a')) {
const textContent = li.textContent.trim(); //получаю текст li
li.innerHTML = `<span>${textContent}</span> <a href="https://ru.stackoverflow.com/q/1593414/264178" class="strike-link" target="_blank">Я ссылка, меня не перечеркиваем</a>`;
}
});
});
myList.addEventListener('click', function(event) {
const li = event.target.closest('li');
//проверяю, чтобы клик не был по ссылке и у li была ссылка
if (!event.target.matches('.strike-link') && li.querySelector('a')) {
//добавляю/удаляю класс strikethrough для li
li.classList.toggle('strikethrough');
}
});
.strikethrough span {
text-decoration: line-through;
}
<ul id="myList">
<li>Текст ссылки1, надо перечеркнуть</li>
<li>Текст ссылки2, надо перечеркнуть</li>
<li>Текст ссылки3, надо перечеркнуть</li>
</ul>
<button id="addLinksBtn">Добавить ссылки</button>
Как при клике на li зачеркивать текст, но не ссылку
Например вот так такое можно сделать...
const ul = document.querySelector("ul");
const href = `<a href='#'>${"http://127.0.0.1:5500/122.html"}</a>`
const lis = ul.querySelectorAll("li");
document.querySelector("button").addEventListener("click", function() {
lis.forEach(o => {
o.innerHTML = `<span>${o.textContent}</span> ${href}`
})
ul.addEventListener("click", function(event) {
const li = event.target.closest("li");
if (!li) return
li.querySelector("span").classList.add('off');
});
}, { once: true });
.off {
text-decoration: line-through;
}
<ul>
<li>Ссылка 1</li>
<li>Ссылка 2</li>
<li>Ссылка 3</li>
<li>Ссылка 4</li>
<li>Ссылка 5</li>
<li>Ссылка 6</li>
<li>Ссылка 7</li>
<li>Ссылка 8</li>
<li>Ссылка 9</li>
<li>Ссылка 10</li>
<li>Ссылка 11</li>
</ul>
<button>press me</button>
Чуть исправил свой код и получил нужный результат. Всем спасибо за варианты решений)
let ul = document.querySelector("ul");
let href = `<a href='#'>${"http://127.0.0.1:5500/122.html"}</a>`; // ссылка для добавления в li
let lis = document.querySelectorAll("li"); // ищу все li
document.querySelector("button").addEventListener("click", function () {
for (const li of lis) {
li.innerHTML = `<span>${li.textContent}</span>: ${href} `; // добавляю в каждый li ссылку и оборачиваю текст li в span
}
ul.addEventListener("click", function (event) {
let li = event.target.closest("span"); // ищу все li
if (li) {
li.innerHTML = `<s>${li.textContent}</s>`// оборачиваю span в <S>
} else return;
});
}, { once: true });
<ul>
<li>Ссылка 1</li>
<li>Ссылка 2</li>
<li>Ссылка 3</li>
<li>Ссылка 4</li>
<li>Ссылка 5</li>
<li>Ссылка 6</li>
<li>Ссылка 7</li>
<li>Ссылка 8</li>
<li>Ссылка 9</li>
<li>Ссылка 10</li>
<li>Ссылка 11</li>
</ul>
<button>press me</button>