在 Alpine.js 中单击按钮时显示所有 x-show div

Question

这看起来很简单，但不太明白。我有三个 Div 可以根据选择进行切换，但我还尝试使用一个“查看全部”按钮来切换以显示所有三个 div。我也希望有第一个 Div 加载显示。

<div x-data="{ color: '' }">
  
    <button x-on:click="color='Yellow', color='Red', color='Orange'">Show All</button>

    <select x-model="color">
        <option>Red</option>
        <option>Orange</option>
        <option>Yellow</option>
    </select>
  
    <div x-show="color === 'Red'">Show on Load</div>
    <div x-show="color === 'Orange'">Orange</div>
    <div x-show="color === 'Yellow'">Yellow</div>
</div>

Link 到 JSbin

Answer 1

引入专用的 'All' 状态来显示所有项目。 color 的默认值可以在 x-data.

处给出

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ color: 'Red', defaultColor: 'Red' }"> 
    <button x-on:click="color = (color === 'All') ? defaultColor : 'All'">Show All</button>

    <select x-model="color">
        <option>Red</option>
        <option>Orange</option>
        <option>Yellow</option>
    </select>
  
    <div x-show="color === 'Red' || color === 'All'">Show on Load</div>
    <div x-show="color === 'Orange' || color === 'All'">Orange</div>
    <div x-show="color === 'Yellow' || color === 'All'">Yellow</div>
</div>

在 Alpine.js 中单击按钮时显示所有 x-show div

Show all x-show divs on button click in Alpine.js

javascript

alpine.js