尝试创建多个带有下拉列表的动画烤肉串菜单在 Laravel 中不起作用 8

Question

如果您需要更多详细信息，可以询问。 提前致谢 在 laravel 8 我有一个按钮，当我点击它时创建应用程序，它会带我到页面添加一些数据。 当我添加数据时，它会在列表视图中显示很多应用程序。 在每个列表视图中，我都有一个动画烤肉串菜单 . 但问题是当我创建新的应用程序下拉列表时只适用于最后输入的应用程序。 所以这意味着如果我创建 10 个应用程序下拉列表将仅适用于我输入的最后一个应用程序，它将不适用于其他 9 个。

这是我的 index.blade.php 的一些代码，它可以创建 multipul kebab 菜单但不适用于下拉菜单

@foreach ($products as $product)
            <div class="col-xs-12 col-sm-12 col-md-12">
                {{-- <div class="card-body row"> --}}
                    <form action="{{ route('products.destroy', $product->id) }}" method="POST">
                        {{-- <ul class="nav"> --}}
                            <a class="btn btn-outline-info" href="{{ route('products.edit', $product->id) }}">
                                <br>
                                <img src="/logo/{{ $product->logo }}" width="100px" class="col-4">
                                <div class="col-2" style="color: #1d2124">
                                    <strong >App Name:- {{ $product->name }}</strong>
                                    <br>
                                    <strong>App Id:- {{ $product->id }}</strong>
                                </div>
                            </a>
                            <div class="pull-right">
                                <div class="kebab">
                                    <figure></figure>
                                    <figure class="middle"></figure>
                                    <p class="cross">x</p>
                                    <figure></figure>
                                    <ul class="dropdown">
                                        @csrf
                                        @method('DELETE')
                                        <li><button type="submit" class="btn btn-danger">Delete</button></li>
                                        <li><a href="api/json_link">All Json</a></li>
                                        <li><a href="api/SearchById">JsonById</a></li>
                                        <li><a href="api/SearchByName">JsonByName</a></li>
                                    </ul>
                                </div>
                            </div>
                        {{-- </ul> --}}
                    </form>
                {{-- </div> --}}
            </div>
        @endforeach

这是 javescript 代码，它可以为所有应用程序创建 kabeb 菜单，但为 app.js 中最后插入的应用程序创建下拉菜单

require('./bootstrap');

require('alpinejs');
var kebab = document.querySelector(".kebab"),
    middle = document.querySelector(".middle"),
    cross = document.querySelector(".cross"),
    dropdown = document.querySelector(".dropdown");

kebab.addEventListener("click", function() {
    middle.classList.toggle("active");
    cross.classList.toggle("active");
    dropdown.classList.toggle("active");
});

Answer 1

document.querySelector仅返回与您的选择器匹配的最后一个 DOM 元素。 如果你想为每个烤肉串应用一个下拉菜单，你必须使用

kebabs = document.querySelectorAll(".kebab")
...
kebabs.foreach(this.addEventListener("click", function(){
   //do what you want
})