使用 Alpine JS 切换元素与类？

Posted 2023-03-07

【中文标题】使用 Alpine JS 切换元素与类？

【英文标题】：Toggle elements with class using Alpine JS?

【发布时间】：2021-06-05 22:57:25

【问题描述】：

我正在尝试使用 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>

【参考方案1】：

查看他们的 GitHub 页面，了解可用指令的列表以及它们的作用。

Alpine.js GitHub

x-data 声明一个新的组件范围。 将您希望切换的元素包裹在父 div 中并初始化 x-data 指令并设置 show :false 这将带有 x-show 指令的以下子元素设置为隐藏。

x-show 根据表达式在元素上切换 display: none; （真或假）。 然后设置你的子元素x-show ="show"。

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

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

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

<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>

【讨论】：

谢谢！那很接近。生成了 html，并且我没有将所有 A 和 B 整齐地收集到单独的 div 中，因此我需要将其应用于“所有带有 x 的 div”等。此外，当您单击 A 时，它应该隐藏所有 B，反之亦然.我在上面的代码中添加了一个效果很好的解决方案，尽管有些冗余。另外我猜幻灯片不包含在 Alpine 中作为默认设置。谢谢你的时间。我会阅读所有这些内容。