setAttribute修改isClicked属性值仅生效一次的问题求助

你的代码逻辑只生效一次的核心问题是字符串类型的布尔值在条件判断中的处理错误：

当你使用getAttribute('isClicked')获取属性值时，返回的结果是字符串类型（比如"true"或"false"），而JavaScript中所有非空字符串在布尔判断中都会被视为true。也就是说，当isClicked被设置为"false"后，i.getAttribute('isClicked')返回的"false"依然会让条件判断为真，导致每次点击都会执行setAttribute('isClicked', false)，永远无法切换回true。

下面提供几种可行的修复方案，你可以根据需求选择：

方案1：正确判断字符串类型的布尔值 #

直接判断属性值是否等于字符串"true"，然后取反设置：

const foldable = document.getElementsByClassName('foldable')
let result = Array.from(foldable)
result.forEach(i => {
  i.onclick = () => {
    // 明确判断属性值是否为"true"
    const currentState = i.getAttribute('isClicked') === 'true';
    // 取反后设置，setAttribute会自动转为字符串
    i.setAttribute('isClicked', !currentState);
  }
})

方案2：使用HTML5规范的data属性（推荐） #

自定义属性推荐使用data-前缀，配合datasetAPI操作更清晰：

<!-- 先把元素的属性改成data-is-clicked -->
<div class="foldable" data-is-clicked="true">...</div>

const foldable = document.getElementsByClassName('foldable')
let result = Array.from(foldable)
result.forEach(i => {
  i.onclick = () => {
    const currentState = i.dataset.isClicked === 'true';
    i.dataset.isClicked = !currentState;
  }
})

方案3：直接在元素对象上存储状态（性能最优） #

如果不需要将状态同步到DOM属性中，可以直接在元素对象上添加自定义属性，避免频繁DOM操作：

const foldable = document.getElementsByClassName('foldable')
let result = Array.from(foldable)
result.forEach(i => {
  // 初始化状态，默认false
  i.isClicked = i.isClicked ?? false;
  i.onclick = () => {
    // 直接切换布尔值
    i.isClicked = !i.isClicked;
    // 如果需要同步到DOM属性，可添加以下一行
    // i.setAttribute('isClicked', i.isClicked);
  }
})

内容的提问来源于stack exchange，提问作者Moth