Массив разных идентификаторов с laravel

Question

Я пытаюсь договориться, чтобы пройти через различные идентификаторы, которые у меня есть. Я использую lavarel, но я не знаю, как передать значения в javascript, точно так же, как обход массива, я очень мало знаю о javascript, я мало знаю jquery. Я не знаю, что делать, надеюсь, вы мне поможете.

Это HTML.

 @foreach($products as $product)
    <div class="product">

      <div id="{{$product->slug}}">

            <div class="shadow"></div>
            <img src="{{ productImage($product->image) }}" alt="" />
            <div class="image_overlay"></div>
            <div class="stats">         
                <div class="stats-container">
                    <span class="product_price">{{$product->presentPrice()}}</span>
                    <span class="product_name">{{$product->name}}</span>    
                    <p>{{$product->details}}</p>                                            

                    <div class="product-options">
                    <a href="{{route('shop.show', $product->slug)}}">Ver</a>
                    <form action="{{ route('cart.store') }}" method="POST">
                    {{ csrf_field() }}
                    <input type="hidden" name="id" value="{{ $product->id }}">
                    <input type="hidden" name="name" value="{{ $product->name }}">
                    <input type="hidden" name="price" value="{{ $product->price }}">
                    <button type="submit" class="button button-plain">Add</button>
                    </form>
                </div>                       
                </div>                         

        </div>
@endforeach

Это Javascript

    $(document).ready(function(){

    // Lift card and show stats on Mouseover
    var elms = document.querySelectorAll("[id='{{$product->slug}}']");

    for(var i = 0; i < elms.length; i++) 
    elms[i].hover(function(){
            elms[i].addClass('animate');
            $('div.carouselNext, div.carouselPrev').addClass('visible');            
         }, function(){
            elms[i].removeClass('animate');         
            $('div.carouselNext, div.carouselPrev').removeClass('visible');
    }); 
});

Если я оставлю идентификатор статически, это сработает. Но если я пытаюсь сделать динамику не работает, мне нужно быть динамичным или показывать разные продукты.

Answer 1

Просто используйте класс вместо идентификатора ...

var elms = document.querySelectorAll("div.product");

Это вернет статический список всех узлов, которые имеют класс продукта ... таким образом, все ваши карты продукта ...