javascript - 使用 Alpine JS 切换元素与类？

Question

我正在尝试 Alpine JS 并来自 jQuery。我怎样才能在 Alpine js 中做到这一点？

$('a').on('click', function(e) {
  $('div').not('.' + $(this).data('class')).hide('slow');
  $('.' + $(this).data('class')).slideToggle();
});

a {
 display: block;
}
 div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-class="a">Show all A's</a>
<div class="a">A</div>
<div class="a">A</div>
<div class="a">A</div>
<a href="#" data-class="b">Show all B's</a>
<div class="b">B</div>
<div class="b">B</div>

//编辑这非常接近。有什么改进建议吗？谢谢!

a {
 display: block;
}

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
<section x-data="{ letter: '' }">
    <a href="#" @click.prevent="letter = (letter === 'a' ? '' : 'a')">Show all A's</a>
    <div x-show.transition.in="letter === 'a'">A</div>
    <div x-show.transition.in="letter === 'a'">A</div>
    <div x-show.transition.in="letter === 'a'">A</div>
    <a href="#" @click.prevent="letter = (letter === 'b' ? '' : 'b')">Show all B's</a>
    <div x-show.transition.in="letter === 'b'">B</div>
    <div x-show.transition.in="letter === 'b'">B</div>
</section>

Answer 1

查看他们的 GitHub 页面以获取可用指令的列表以及它们的作用。
Alpine.js GitHub

x数据声明一个新的组件范围。
将要切换的元素包裹在父 div 中并初始化 x-data指令和设置{show :false}这将以下子元素设置为 x-show指令隐藏。

x秀切换 display: none; 取决于表达式的元素
(对或错)。然后设置你的子元素x-show ="show" .

@click => x-on 将事件监听器附加到元素。发出时执行 JS 表达式。在您的点击元素上，设置 x-on指令，或使用 @符号 => @click=设置它以显示隐藏元素。 @click="show" .此外，我们使用 @click="show = ! show禁用时显示，启用时隐藏。

x-文本 与 x-bind 类似，但会更新元素的 innerText。设置元素中的文本，并在真/假时使用条件更改 => x-text="show ? 'Hide all B\'s' : 'Show all B\'s'" .

x 过渡 用于将类应用于元素转换的各个阶段的指令。

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<!--/ x-data pass int he  /-->
<div x-data="{ show: false }">
  <a @click="show = ! show" x-text="show ? 'Hide all A\'s' : 'Show all A\'s'">Show all A's</a>
  <div x-show.transition.in="show" class="a">A</div>
  <div x-show.transition.in="show" class="a">A</div>
  <div x-show.transition.in="show" class="a">A</div>
</div>
<div x-data="{ show: false }">
<a @click="show = ! show" x-text="show ? 'Hide all B\'s' : 'Show all B\'s'">Show all B's</a>
  <div x-show.transition.in="show" class="b">B</div>
  <div x-show.transition.in="show" class="b">B</div>
  <div x-show.transition.in="show" class="b">B</div>
</div>