JavaScript 获取点击的 Step 元素的 HTML 文本内容

如何获取点击的 Step 元素的 HTML 文本内容

以下代码示例展示了如何获取点击的 step 元素的 HTML 文本内容：javascriptconst steps = document.querySelectorAll('.step');

steps.forEach(step => { step.addEventListener('click', () => { steps.forEach(step => step.classList.remove('active')); step.classList.add('active'); // 获取step的HTML文本内容 const stepText = step.innerHTML; console.log(stepText); // switchStep(stepText); });});

在点击 step 元素时，会将 active 类从所有 step 中移除，并将 active 类添加到当前点击的 step 元素上。然后使用 innerHTML 属性获取 step 元素的 HTML 文本内容，并打印到控制台。你可以根据需求进一步处理获取到的文本内容。

代码解析：

document.querySelectorAll('.step')：获取所有具有 step 类名的元素。- forEach：遍历所有 step 元素，为每个元素添加点击事件监听器。- step.addEventListener('click', () => { ... })：在每个 step 元素上添加点击事件监听器，当点击事件发生时执行回调函数。- steps.forEach(step => step.classList.remove('active'))：将所有 step 元素的 active 类移除。- step.classList.add('active')：将 active 类添加到当前点击的 step 元素上。- step.innerHTML：获取 step 元素的 HTML 文本内容。- console.log(stepText)：将 step 元素的 HTML 文本内容打印到控制台。

示例：

假设你的 HTML 代码如下：html

步骤 1

步骤 2

步骤 3

当你点击 '步骤 2' 时，控制台将输出：

步骤 2