寻求Webflow中李克特量表报告的自定义代码解决方案

我在Webflow上实现李克特量表结果的表格图表，单排展示的代码能正常运行，但添加多行内容后，JavaScript逻辑失效，无法正确显示对应问题的圆形标识。

原单排正常运行代码 #

<style>
  .tf-bg-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    padding: 5px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
  }

  .tf-bg-no-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    padding: 5px;
    color: #000000;
    font-size: 24px;
    font-weight: bold;
    background-color: #DDDDDD;
  }
</style>

<!-- 单排量表项HTML -->
<div id="q1a" class="tf-bg-color">1</div>
<div id="q1a-no-color" class="tf-bg-no-color">1</div>
<div id="q1b" class="tf-bg-color">2</div>
<div id="q1b-no-color" class="tf-bg-no-color">2</div>
<div id="q1c" class="tf-bg-color">3</div>
<div id="q1c-no-color" class="tf-bg-no-color">3</div>
<div id="q1d" class="tf-bg-color">4</div>
<div id="q1d-no-color" class="tf-bg-no-color">4</div>
<div id="q1e" class="tf-bg-color">5</div>
<div id="q1e-no-color" class="tf-bg-no-color">5</div>

<!-- 单排控制JS -->
<script>
  const elements = document.querySelectorAll('.tf-bg-color');

  function showElement(element) {
    element.style.display = 'inline-flex';
  }

  function hideElement(element) {
    element.style.display = 'none';
  }

  function toggleElement(element, value) {
    if (element.innerText === value.toString()) {
      showElement(element);
    } else {
      hideElement(element);
    }
  }

  const variable = 1; // 替换为实际结果值

  for (let i = 0; i < elements.length; i++) {
    const id = elements[i].id;
    toggleElement(elements[i], variable);

    if (id) {
      const noColorElement = document.querySelector(`#${id}-no-color`);
      if (noColorElement) {
        elements[i].style.display === 'none' ? showElement(noColorElement) : hideElement(noColorElement);
      }
    }
  }
</script>

当前失效的多行尝试代码 #

<!-- 多行尝试CSS -->
<style>
.tf-bg-color {
display: none;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #b7adac; /* 自定义颜色 */
color: #FFFFFF; /* 自定义文字颜色 */
font-size: 24px; /* 自定义字号 */
font-weight: bold; /* 自定义字重 */
}

.tf-bg-color-q2 {
display: none;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #b7adac; /* 自定义颜色 */
color: #FFFFFF; /* 自定义文字颜色 */
font-size: 24px; /* 自定义字号 */
font-weight: bold; /* 自定义字重 */
}

.tf-bg-no-color {
display: none;
color: #000000;
font-size: 14px;
}
</style>

<!-- 多行量表项HTML -->
<div id="q1a" class="tf-bg-color">1</div>
<div id="q1b" class="tf-bg-color">2</div>
<div id="q1c" class="tf-bg-color">3</div>
<div id="q1d" class="tf-bg-color">4</div>
<div id="q1e" class="tf-bg-color">5</div>
<div id="q2a" class="tf-bg-color-q2">1</div>
<div id="q2b" class="tf-bg-color-q2">2</div>
<div id="q2c" class="tf-bg-color-q2">3</div>
<div id="q2d" class="tf-bg-color-q2">4</div>
<div id="q2e" class="tf-bg-color-q2">5</div>

<!-- 失效的多行控制JS -->
<script>
    const elements = document.querySelectorAll('.tf-bg-color, .tf-bg-color-q2');

  function showElement(element) {
    element.style.display = 'inline-flex';
  }

  function hideElement(element) {
    element.style.display = 'none';
  }

  function toggleElement(element, value, className) {
    if (element.innerText === value.toString() && element.classList.contains(className)) {
      showElement(element);
    } else {
      hideElement(element);
    }
  }

  const variable = 1; // 问题1结果值
  const variable2 = 2; // 问题2结果值

  for (let i = 0; i < elements.length; i++) {
    const id = elements[i].id;

    toggleElement(elements[i], variable, 'tf-bg-color');
    toggleElement(elements[i], variable2, 'tf-bg-color-q2');

  for (let i = 0; i < elements.length; i++) {
    const id = elements[i].id;
    toggleElement(elements[i], variable);

    if (id) {
      const noColorElement = document.querySelector(`#${id}-no-color`);
      if (noColorElement) {
        if (elements[i].style.display === 'none') {
          showElement(noColorElement);
        } else {
          hideElement(noColorElement);
        }
      }
    }
  }
</script>

问题分析与修复方案 #

核心问题点 #

1. JS循环嵌套错误：第一个for循环未闭合就嵌套第二个循环，导致逻辑执行混乱。
2. 状态覆盖冲突：对同一元素先后调用两次toggleElement，第二次调用会覆盖第一次的显示/隐藏状态。
3. CSS冗余+元素缺失：重复定义相似样式，且未添加tf-bg-no-color对应的元素，切换逻辑不完整。

修复后的完整代码 #

<style>
/* 提取公共圆形样式，减少冗余 */
.tf-circle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
}

/* 激活状态样式 */
.tf-bg-color {
  background-color: #b7adac;
  color: #FFFFFF;
}

/* 默认无颜色样式 */
.tf-bg-no-color {
  background-color: #DDDDDD;
  color: #000000;
}

/* 问题组容器，方便Webflow布局 */
.question-group {
  margin: 10px 0;
}
</style>

<!-- 问题1量表组 -->
<div class="question-group">
  <div id="q1a" class="tf-circle tf-bg-color">1</div>
  <div id="q1a-no-color" class="tf-circle tf-bg-no-color">1</div>
  <div id="q1b" class="tf-circle tf-bg-color">2</div>
  <div id="q1b-no-color" class="tf-circle tf-bg-no-color">2</div>
  <div id="q1c" class="tf-circle tf-bg-color">3</div>
  <div id="q1c-no-color" class="tf-circle tf-bg-no-color">3</div>
  <div id="q1d" class="tf-circle tf-bg-color">4</div>
  <div id="q1d-no-color" class="tf-circle tf-bg-no-color">4</div>
  <div id="q1e" class="tf-circle tf-bg-color">5</div>
  <div id="q1e-no-color" class="tf-circle tf-bg-no-color">5</div>
</div>

<!-- 问题2量表组 -->
<div class="question-group">
  <div id="q2a" class="tf-circle tf-bg-color">1</div>
  <div id="q2a-no-color" class="tf-circle tf-bg-no-color">1</div>
  <div id="q2b" class="tf-circle tf-bg-color">2</div>
  <div id="q2b-no-color" class="tf-circle tf-bg-no-color">2</div>
  <div id="q2c" class="tf-circle tf-bg-color">3</div>
  <div id="q2c-no-color" class="tf-circle tf-bg-no-color">3</div>
  <div id="q2d" class="tf-circle tf-bg-color">4</div>
  <div id="q2d-no-color" class="tf-circle tf-bg-no-color">4</div>
  <div id="q2e" class="tf-circle tf-bg-color">5</div>
  <div id="q2e-no-color" class="tf-circle tf-bg-no-color">5</div>
</div>

<script>
function showElement(element) {
  element.style.display = 'inline-flex';
}

function hideElement(element) {
  element.style.display = 'none';
}

// 按问题分组处理，避免状态冲突
function toggleQuestionGroup(questionPrefix, targetValue) {
  for (let score = 1; score <=5; score++) {
    const colorEl = document.getElementById(`${questionPrefix}${String.fromCharCode(96 + score)}`);
    const noColorEl = document.getElementById(`${questionPrefix}${String.fromCharCode(96 + score)}-no-color`);
    
    if (score === targetValue) {
      showElement(colorEl);
      hideElement(noColorEl);
    } else {
      hideElement(colorEl);
      showElement(noColorEl);
    }
  }
}

// 定义各问题的结果值
const q1Result = 1;
const q2Result = 2;

// 单独控制每个问题组
toggleQuestionGroup('q1', q1Result);
toggleQuestionGroup('q2', q2Result);
</script>

修复说明 #

1. CSS优化：用.tf-circle提取公共样式，新增问题只需复制HTML结构，无需修改CSS。
2. JS逻辑重构：按问题分组处理，每个问题独立控制自己的分值项，彻底避免状态覆盖。
3. 结构补全：恢复每个分值对应的无颜色圆形元素，保证切换逻辑完整。
4. 布局友好：添加question-group容器类，方便在Webflow中调整间距和布局。

内容的提问来源于stack exchange，提问作者Nicholas Graham Platt