李克特量表报告的自定义代码帮助

Question

所以我正在尝试为 Webflow 做一些复杂的事情。我被困在如何解决这个问题上，我想知道是否有人可以提供帮助。基本上，我正在尝试创建一个表格图表，向用户显示李克特比例图的结果。

我有一些代码可以很好地使它显示如下：

<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>

<!-- Add this HTML code to your page for each element you want to show/hide -->
<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>

<!-- Add this JavaScript code to the end of your <body> section -->
<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; // Replace with your variable

  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>

我遇到的问题是，当我添加多行时，我无法弄清楚如何计算出 javascript，以便我可以让圆圈出现在不同的问题后面。

这是我到目前为止所拥有的，但它没有用。有没有人可以指出我正确的方向？


<!-- Add this CSS code to your <head> section -->
.tf-bg-color {
display: none;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #b7adac; /* replace with the color you want /
color: #FFFFFF; / replace with the text color you want /
font-size: 24px; / replace with the font size you want /
font-weight: bold; / replace with the font weight you want */
}

.tf-bg-color-q2 {
display: none;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #b7adac; /* replace with the color you want /
color: #FFFFFF; / replace with the text color you want /
font-size: 24px; / replace with the font size you want /
font-weight: bold; / replace with the font weight you want */
}

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

<!-- Add this HTML code to your page for each element you want to show/hide -->
<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>
<!-- Add this JavaScript code to the end of your <body> section -->
<!-- Add this JavaScript code to the end of your <body> section -->
<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; // Replace with your variable
  const variable2 = 2; // Replace with your second variable

  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>

李克特量表报告的自定义代码帮助

问题描述投票：0回答：0

最新问题

李克特量表报告的自定义代码帮助

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0