在待办事项列表中隐藏/显示不同的内容并使用 JavaScript 一次显示一个内容 [关闭]

Posted 2023-02-22

【中文标题】在待办事项列表中隐藏/显示不同的内容并使用 JavaScript 一次显示一个内容 [关闭]

【英文标题】：hide/show different content in todo list and show one content at a time using JavaScript [closed]

【发布时间】：2021-11-20 16:23:59

【问题描述】：

我正在使用 laravel 框架构建这个网站，我不擅长 js 技巧，因为我只需要列出待办事项标题，但是当用户点击它们时，它会显示自己的内容。到目前为止，它只适用于最后一个。

<div class="container-fluid">
                    <h1>Painted List <a href="/create" class="text-success"><i class="fa fa-plus"></i></a></h1>
                    <ul>
                    @if(count($paints) > 0)
                    @foreach($paints as $paint)
                            <li onclick="myFunction()"><span><i class="fa fa-trash"></i></span>  $paint->title </li>
                            <div class="card-body" id="contentBody">
                                <p class="content"> $paint->content </p>
                            </div>
                            <script>
                            function myFunction() 
                            var x = document.getElementById("contentBody");
                            if (x.style.display === "none") 
                                x.style.display = "block";
                             else 
                                x.style.display = "none";
                            
                            
                            </script>
                    @endforeach
                    @else
                    <li><span><i class="fa fa-trash"></i></span> No Paint yet!</li>
                    @endif
                    </ul>
                </div>

这是我的代码，希望有人能帮助我使用 CSS、javascript 和 html 显示和隐藏

作为一个帮助，现在它在点击时显示内容，但一次不显示一个内容In this photo shows that I have clicked in both headers and all content from two headers are shown ut that is not what I want

【问题讨论】：

我不知道 laravel 是如何工作的，但我可以肯定地说 <script> 标签不应该在 for 循环内

【参考方案1】：

将onclick放在

内的div中以允许返回父 并将card-body元素放在 内并在foreach外使用

【讨论】：

它现在显示不同的内容，但它有一个新问题，我还需要它一次显示一个内容

我不明白你的问题