Question

我有两个div，其中将包含有关不同咖啡的一些信息，每个div将包含一些跨度为1到10的文本，以对咖啡的不同方面（例如咖啡质量，互联网速度，舒适度等）进行评分

所以我想要实现的是，一旦单击了过滤器容器中的按钮（例如byQuality按钮），然后就根据CoffeeQuality span类从最高到最低的等级来组织div。

不确定如何解决实际上停留在html上的Javascript，有人可以给我一些有关我应该在哪里观看的指导吗？谢谢

HTML

<div class="filterBar">
   <button class="byQuality" onclick="">COFFEE QUALITY</button>
   <button class="byWifi" onclick="">WIFI SIGNAL</button>
   <button class="byQuality" onclick="">CHAIR COMFORT</button>
</div>

<div class="coffeeWrapper" id="coffee1">
   <h3 class="coffeeTitle">Name of the Coffee</h3>
   <p>Coffee Quality:<span id="coffeeQuality">5</span></p>
   <p>Wifi Signal:<span id="coffeeWifi">8</span></p>
   <p>Chair Comfort:<span id="coffeeComfort">4</span></p>
</div>

<div class="coffeeWrapper" id="coffee2">
   <h3 class="coffeeTitle">Name of the Coffee</h3>
   <p>Coffee Quality:<span id="coffeeQuality">9</span></p>
   <p>Wifi Signal:<span id="coffeeWifi">2</span></p>
   <p>Chair Comfort:<span id="coffeeComfort">2</span></p>
</div>

通过“某些”按钮可以通过检查相关的Span ID并按从最高速率到最低速率的顺序来触发div的重新组织？

单击按钮后用值重新组织div

0 个答案: