我正在尝试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/[email protected]/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条答案
按热度按时间2ledvvac1#
查看他们的GitHUb页面，了解可用指令的列表以及它们的作用。
Alpine.js GitHub
x-data 声明一个新的组件作用域。 将你想要切换的元素 Package 在父div中，初始化
x-data指令并设置{show :false}这将以下子元素与x-show指令设置为隐藏。x-show 根据表达式（true或false）在元素上切换
display: none;**。 然后设置子元素x-show ="show"。*@click => x-on 将事件侦听器附加到元素。 在click元素上，设置
x-on指令，或者使用@符号=>@click=set this来显示隐藏的元素。@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 用于将类应用于元素转换的各个阶段的指令。