Javascript 价格转换在所有div中循环

我已经创建了一个vue组件，因此我可以在一些定价选项之间切换，但我不确定如何最好地循环使用所有选项

我可以使用这个循环遍历第一项

methods: {
  toggle() {
    this.isEnabled = !this.isEnabled;
    let priceMonthly = document.querySelectorAll(".price-monthly");
    let priceYearly = document.querySelectorAll(".price-yearly");
    priceMonthly.classList.toggle("hidden");
    priceYearly.classList.toggle("hidden");
  }
}

我已经尝试过这个方法来循环查看plans div中的所有价格

methods: {
  toggle() {
    this.isEnabled = !this.isEnabled;
    function togglePrice() {
      let plans = document.querySelector("#plans");
      let priceMonthly = document.querySelectorAll(".price-monthly");
      let priceYearly = document.querySelectorAll(".price-yearly");

      for (var i = 0; i < plans.length; i++) {
        priceMonthly.classList.toggle("hidden");
        priceYearly.classList.toggle("hidden");
      }
    }

    togglePrice();
  }
}

方法：{
切换（）{
this.isEnabled=！this.isEnabled；
函数togglePrice（）{
let plans=document.querySelector（“计划”）；
让priceMonthly=document.queryselectoral（“.price monthly”）；
让priceyear=document.queryselectoral（“.price year”）；
对于（变量i=0；i

以下是我在planItem组件中设置定价的方式：

<span class="text-4xl font-bold price-monthly">{{ planMonthlyPrice }}</span>
<span class="text-4xl font-bold price-yearly hidden">{{ planYearlyPrice }}</span>

<div id="plans" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 flex-wrap gap-4 mt-24">
   <slot></slot>
</div>

{{planMonthlyPrice}
{{planYearlyPrice}}

以下是计划组成部分中的主要部门：

<span class="text-4xl font-bold price-monthly">{{ planMonthlyPrice }}</span>
<span class="text-4xl font-bold price-yearly hidden">{{ planYearlyPrice }}</span>

<div id="plans" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 flex-wrap gap-4 mt-24">
   <slot></slot>
</div>

---

查询选择器返回第一个结果。您只能有一个id为的项。您不能更新集合，必须循环每个项

document.querySelector（#toggle”）.addEventListener（“单击”，函数（）{
document.querySelectorAll（“.price Year，.price monthly”）
.forEach（功能（元素）{
elem.classList.toggle（'hidden'）
})
})

.hidden{display:none；}

每月1
年度1
每月2
年度2
每月3次
年度3
每月4次
年度4
每月5次
每年5次
切换

您是否意识到

查询选择器

返回匹配的第一项？所以没有什么可以重复的。哦@我将更新代码，因为它仍然不可用working@debugabug你会想检查的。只有主div有一个id，其余的都是基于类的，但是如果需要的话，我会给它一个尝试和调整。效果很好，在你关闭它之前调整了第一个选项，但是谢谢你的更新。干杯