forEach querySelectorAll i addEventListener

Odpowiedz Nowy wątek
2019-04-29 12:28

Rejestracja: 1 rok temu

Ostatnio: 1 rok temu

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'; ?>

Pozostało 580 znaków

mlk
2019-04-29 13:22
mlk

Rejestracja: 2 lata temu

Ostatnio: 1 dzień temu

0

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

Pozostało 580 znaków

2019-04-29 13:44

Rejestracja: 2 lata temu

Ostatnio: 9 godzin temu

1

powinienem zrobić to za pomocą forEach

Tak.

pomoże ktoś?

https://www.techiediaries.com[...]selectorall-nodelist-foreach/


Pozostało 580 znaków

Odpowiedz

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