嘗試創建多個帶有下拉列表的動畫烤肉串菜單在 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
})