forEach querySelectorAll i addEventListener

0

Witam mam następujący problem chciał bym na swojej stronie zrobić tai efekt jak na allegro że jak najeżdżam myszką na obrazek (item-img) to wyświetla się obok większy div(popover-fluid) z galeria danego przedmiotu. sęk w tym że jak użyję querySelectorAll żeby wybrać wszystkie elementy i klasie (item-img) i chcial bym im przypisać addEventListener ("mouseover") powinienem zrobić to za pomocą forEach lub pętlą for żeby działało dla wszystkich elementów i kompletnie nie wiem jak się do tego zabrać.. pomoże ktoś?
oto sam kod z lista przedmiotów

<?php include 'includes/navbar.php'; ?>
<?php include 'includes/aside.php'; ?>
<div class="main col-sm-12 col-md-9">
    <div class="content col-9">
        <div class="page-header">
            <h2>Zestawy</h2>
        </div>
        <hr />
        <div class="items">
            <ul class="itemlist">
                <a href="#" class="list-group-item list-group-item-action list-group-item-default">
                    <div class="single-item">
                        <div class="row">
                            **<div class="item-img col-sm-4 col-md-3 col-lg-3" id="pic">
                                <img class="img-fluid" id="obraz" src="items/1.jpg" alt="obraz" />
                            </div>
                            <div class="popover-fluid" id="popover">
                                <div class="row">
                                    <div class="item-img col-6" id="pop">
                                        <img class="img-fluid" src="items/1.jpg" />
                                    </div>
                                </div>
                            </div>**
                            <div class="item-content col-sm-6 col-md-7 col-lg-7 col-xl-8">
                                <h4>Item 1</h4>

                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Aspernatur veritatis dolor autem inventore non
                                    similique consectetur minima illo obcaecati delectus.
                                    Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Aspernatur veritatis dolor autem inventore non
                                    similique
                                </p>
                                <br />
                                <span class="cena">
                                    <h4>Cena: 200 zł</h4>
                                </span>
                                <button type="button" class="btn btn-success">
                                    Do Koszyka
                                </button>
                            </div>
                        </div>
                    </div>

                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-default">
                    <div class="single-item">
                        <div class="row">
                            <div class="item-img col-sm-4 col-md-3 col-lg-3">
                                <img class="img-fluid" src="items/2.jpg" alt="obraz" />
                            </div>
                            <div class="popover-fluid">
                                <div class="row">
                                    <div class="item-img col-6" id="pop">
                                        <img class="img-fluid" src="items/2.jpg" />
                                    </div>
                                </div>
                            </div>
                            <div class="item-content col-sm-6 col-md-7 col-lg-7 col-xl-8">
                                <h4>Item 2</h4>

                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Aspernatur veritatis dolor autem inventore non
                                    similique consectetur minima illo obcaecati delectus.
                                    Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Aspernatur veritatis dolor autem inventore non
                                    similique
                                </p>
                                <br />
                                <span class="cena">
                                    <h4>Cena: 200 zł</h4>
                                </span>
                                <button type="button" class="btn btn-success">
                                    Do Koszyka
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="popover-fluid2">
                        <div class="row">
                            <div class="item-img col-6" id="pop">
                                <img class="img-fluid" src="items/1.jpg" alt="obraz" />
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-default">
                    <div class="single-item">
                        <div class="row">
                            <div class="item-img col-sm-4 col-md-3 col-lg-3">
                                <img class="img-fluid" src="items/1.jpg" alt="obraz" />
                            </div>
                            <div class="item-content col-sm-6 col-md-7 col-lg-7 col-xl-8">
                                <h4>Item 3</h4>

                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Aspernatur veritatis dolor autem inventore non
                                    similique consectetur minima illo obcaecati delectus.
                                    Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Aspernatur veritatis dolor autem inventore non
                                    similique
                                </p>
                                <br />
                                <span class="cena">
                                    <h4>Cena: 200 zł</h4>
                                </span>
                                <button type="button" class="btn btn-success">
                                    Do Koszyka
                                </button>
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-default">
                    <div class="single-item">
                        <div class="row">
                            <div class="item-img col-sm-4 col-md-3 col-lg-3">
                                <img class="img-fluid" src="items/1.jpg" alt="obraz" />
                            </div>
                            <div class="item-content col-sm-6 col-md-7 col-lg-7 col-xl-8">
                                <h4>Item 4</h4>

                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Aspernatur veritatis dolor autem inventore non
                                    similique consectetur minima illo obcaecati delectus.
                                    Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Aspernatur veritatis dolor autem inventore non
                                    similique
                                </p>
                                <br />
                                <span class="cena">
                                    <h4>Cena: 200 zł</h4>
                                </span>
                                <button type="button" class="btn btn-success">
                                    Do Koszyka
                                </button>
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-default">
                    <div class="single-item">
                        <div class="row">
                            <div class="item-img col-sm-4 col-md-3 col-lg-3">
                                <img class="img-fluid" src="items/1.jpg" alt="obraz" />
                            </div>
                            <div class="item-content col-sm-6 col-md-7 col-lg-7 col-xl-8">
                                <h4>Item 5</h4>

                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Aspernatur veritatis dolor autem inventore non
                                    similique consectetur minima illo obcaecati delectus.
                                    Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Aspernatur veritatis dolor autem inventore non
                                    similique
                                </p>
                                <br />
                                <span class="cena">
                                    <h4>Cena: 200 zł</h4>
                                </span>
                                <button type="button" class="btn btn-success">
                                    Do Koszyka
                                </button>
                            </div>
                        </div>
                    </div>
                </a>
        </div>
        <div class="pagination justify-content-center">
            <ul class="pagination">
                <li class="page-item-prev">
                    <a class="btn disabled" href="#" tabindex="-1">&larr; Poprzednia</a>
                </li>
                <li class="page-item-next">
                    <a class="btn" href="zestawy.1.php">Następna &rarr;</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>
</div>

<?php include 'includes/footer.php'; ?>
0

No przecież sam wszystko napisałeś, najpierw querySelectorAll, na zwróconej nodelist forEach i tam dla każdego elementu dodaj po prostu eventListener.

1

powinienem zrobić to za pomocą forEach

Tak.

pomoże ktoś?

https://www.techiediaries.com/javascript-queryselectorall-nodelist-foreach/

1 użytkowników online, w tym zalogowanych: 0, gości: 1