主页 / 问题 / 1593085
Accepted
alexWithoutBeard
Asked:2024-09-07 13:46:09 +0000 UTC2024-09-07 13:46:09 +0000 UTC

当您单击段落中的任何单词时，它会以红色突出显示

  • 772

给定一个包含带有单词的文本的段落。确保当您单击本段中的任何单词时，该单词将以红色突出显示。

使用 li、input 和其他不会产生任何问题，因为您可以在那里使用querySelectorAll。但文本有问题）我的代码如下（其中一切都是错误的，但仍然）：

let p = document.querySelector("p"); // Получаю доступ к P
p.addEventListener("click", function() { // здесь уже ошибка - я обрабатываю клик по параграфу, а надо по слову:D
  let pText = document
    .querySelector("p")
    .innerText.split(" ") // получаю массив с текстом из параграфа и пытаюсь его перебрать 
    .forEach(
      (word) => ((p.innerHTML = word), (p.style.color = "red")) // Белеберда, в которой я пытался.... добавить слово в параграф... и покрасить параграф в красный цвет. Ну что написал, то и получил) 
    );
});
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod nostrum nemo, quis ipsum officiis cum id, placeat temporibus soluta tenetur consequatur illum vel autem assumenda corrupti dolor molestias consectetur!
</p>

有一个想法可以使用for of来检查它，但这并不能解决问题。我会在等待大师答复的同时尝试）

javascript

1 个回答

  1. Best Answer

    给定一个包含带有单词的文本的段落。确保当您单击本段中的任何单词时，该单词将以红色突出显示。

    我会尝试把问题分成几个部分

    答：“它以红色突出显示” - 这可以通过 来完成CSS。我们将创建一个类，将文本颜色更改为红色，并且当单击单词时我们将添加或删除此类。

    .red { color: red; }

    B.“每个单词” - 我们需要将段落文本分成单独的单词，以便分别单击每个单词。为此，您可以使用 方法split(" ")，该方法将用空格分隔文本。

    const words = p.innerText.split(" ");

    B.“来自段落”-我们需要处理段落内的文本。首先我们通过document.querySelector或访问该段落getElementById。

    const p = document.getElementById("text");

    D.“来自单词数组” - 一旦段落文本被划分为单词数组，我们需要将每个单词包装在一个元素中span以使其可点击。然后，对于每个单词，我们添加一个事件处理程序click来切换类.red

    words.forEach((word) => { const span = document.createElement("span"); span.innerText = word + " "; // добавляем пробел после слова span.addEventListener("click", function () { this.classList.toggle("red"); // переключаем класс при клике }); p.appendChild(span); // добавляем слово обратно в параграф });

    J. ...我们还需要添加检查，例如，这是一个单词而不是破折号，但由于问题没有说明这一点（只有单词或其他东西），所以我们不进行检查...

    const p = document.getElementById("text");
const words = p.innerText.split(" "); // Разбиваем текст на слова
p.innerHTML = ""; // Очищаем содержимое параграфа

// Проходим по каждому слову
words.forEach((word) => {
  const span = document.createElement("span"); // Создаем элемент span для каждого слова
  span.innerText = word + " "; // Добавляем слово и пробел после него
  span.addEventListener("click", function() {
    this.classList.toggle("red"); // Переключаем класс "red" при клике
  });
  p.appendChild(span); // Добавляем слово (в виде span) в параграф
});
    .red {
  color: red;
}
    <!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>
  <p id="text">
    Знаешь, чем интересен StackOverflow? Это словно огромная библиотека, где любой вопрос уже почти наверняка кем-то решен. Ты задаешь вопрос — и вот он, готовый ответ, решение под рукой. Это, конечно, экономит время и силы, но иногда стоит остановиться и
    подумать: а что происходит с твоими навыками? Ты уже стараешься сам, это видно. Ты пробуешь разные подходы, экспериментируешь с кодом. Это очень важно. Но есть моменты, когда ты спотыкаешься — и вот Тут нужно просто чуть глубже копнуть и подумать
    о том, как манипулировать каждым отдельным элементом текста. Иногда решения кажутся близкими, но из-за мелких деталей не приходят сразу. Это нормально, и все через это проходят. Именно такие моменты, когда что-то не получается с первого раза, — самые
    ценные для роста. Удовольсвтвие от проделанной задачи самостоятельно не сравнимо. Да, это может быть сложно, но ведь именно этот процесс — поиск, анализ, пробование нового — помогает тебе становиться лучше. StackOverflow — отличный инструмент, но
    твой прогресс еще более впечатляющий, когда ты идешь дальше, копаешь вглубь проблемы, сам ищешь решения. Каждый раз, когда тебе хочется задать вопрос, остановись на минуту и подумай: что я еще не попробовал? Ведь ты уже близок к тому, чтобы самостоятельно
    разобраться. Ты уже на правильном пути. всего лишь чуть больше настойчивости — и ты сам найдешь ответы, которые ищешь.
  </p>


</body>

</html>

    • 0

相关问题