复选框 checked/unchecked 时更新进度条的宽度

Question

我想做什么

每次选中或取消选中列表中的复选框时，按百分比值增加或减少进度条。

例如，如果列表中有两个复选框，则当复选框为 checked/unchecked 时，条形图应增加或减少 50%。如果有 4 个复选框，则为 25% 等等

什么有效

我可以设置bar需要的百分比increase/decrease ok。而且我可以获得将宽度更改为例如的进度第一次选中复选框时为 50%。

什么不起作用：

我不知道如何 increase/decrease 每次按 checklistProgressInterval 百分比数量的进度。例如，如果值为 50%，则每次选中复选框时进度应增加 50%，未选中时进度应减少 50%。

我可以让它增加 到 50% 但不能 增加 50%。 += 似乎在每次检查后增加 1%。

谁能帮我解决我做错了什么？谢谢

let checklistItems = document.querySelectorAll('.list--checklist__item'),
    checklistProgressBar = document.querySelector('.progress-bar--checklist .progress-indicator'),
    checklistLen = checklistItems.length,
    checklistProgressInterval = 100 / checklistLen;

checklistItems.forEach((checklistItem) => {
    let checklistInput = checklistItem.querySelector('.input--checklist__input'),
        checklistContainer = checklistItem.querySelector('.input--checklist__container'),
        checklistText = checklistItem.querySelector('.list--checklist__item--text');
    checklistContainer.addEventListener('click', () => {
        if (checklistInput.checked == true) {
            checklistItem.classList.add('finished');
            checklistProgressBar.style.width += `${checklistProgressInterval}%`;
        } else {
            checklistItem.classList.remove('finished');
            checklistProgressBar.style.width -= `${checklistProgressInterval}%`;
        }
    })
});

Answer 1

我猜你做的 += 错了

Afaik，您不能为样式添加宽度，因为您使用的是字符串。需要事先计算好并赋值给变量。

还要确保您的进度条父级有宽度，例如 100px。

检查这个例子：

因此，在此处添加变量而不是 0% 和 50%，并在分配之前计算 %。

function checkMe() {
  const checkBoxes = document.querySelectorAll(".myCheckBox");
  const progress = document.querySelector(".progress-inner");
  const checklistProgressInterval = 100 / checkBoxes.length;
  let width = 0;
  
  for(let i = 0; i < checkBoxes.length; i++){
    if(checkBoxes[i].checked){
      width += checklistProgressInterval;
    }
  }
  
    progress.style.width = `${width}%`;
}

.progress{
  width: 150px;
  height: 20px;
  background-color: #333;
  border: 1px solid black;
  }

.progress-inner{
  background-color: #f7f;
  width: 0%;
  height: 100%;
  }

<div class="progress">
  <div class="progress-inner"></div>
</div>

<input class="myCheckBox" type="checkbox" onclick="checkMe()" />
<input class="myCheckBox" type="checkbox" onclick="checkMe()" />
<input class="myCheckBox" type="checkbox" onclick="checkMe()" />
<input class="myCheckBox" type="checkbox" onclick="checkMe()" />
<input class="myCheckBox" type="checkbox" onclick="checkMe()" />

复选框 checked/unchecked 时更新进度条的宽度

Updating width on progress bar when checkbox checked/unchecked

javascript

progress-bar

ecmascript-6

我想做什么

什么有效

什么不起作用：