Login

saturnus · 19.03.2024, 10:00

Hallo

Ich habe div. Datensätze die aus einer Datenbank kommen. Innerhalb dieser Datensätze möchte ich ein onclick Event setzen, der nur für die jeweilige Zeile gültig ist.

PHP-Code:
while($row=$result->fetch_object()){
                if($frage != $row->frage){
                    echo '<div class="col-lg-12 frage">'.$row->frage.'</div>';
                }
                echo '<div class="col-lg-4">';
                echo '<a href="#" class="box a'.$row->id_fragen.'"><span class="border rounded-circle letter" id="'.$row->question.'">'.$row->letters.'</span> '.$row->solutions.'</a>';;
                echo '</div>';
                $frage = $row->frage;
            } 

Erklärung:
Ich möchte jetzt gerne eine CSS Klasse hinzufügen, resp. entfernen, je nach dem, was geklickt wurde (toggleClass). Pro Zeile sind 3 Antworten zum anklicken möglich. Je nach dem was geklickt wurde, soll der Text via CSS markiert werden. Eine zuvor geklickte Antwort soll wieder neutral werden. Das soll aber nur für die betroffene Zeile gültig sein.
Als Ansatz hab ich das:

Code:
$(document).ready(function(){

    $('.box').click(function(){

        $('.box').removeClass('box-active');

        $(this).addClass('box-active');

    });

});

Bin für einen Tipp dankbar!

Sempervivum · 19.03.2024, 16:19

Ich rätsele die ganze Zeit, was Du genau vor hast. Poste doch mal zwei oder drei vollständige Zeilen mit den 3 Antworten und zwar nicht das PHP sondern das generierte HTML aus der Quelltextansicht des Browsers. Was ist da der Text, der markiert werden soll?

saturnus · 20.03.2024, 09:20

Das ist eine Antwort Zeile (von gesamt 7):

<div class="container">
<span class="rounded-circle"></span>

<div class="row parent">
<div class="col-lg-12 frage">Was bedeutet der Begriff Delay in der Fliegersprache?</div>
<div class="col-lg-4 dataset"><a href="#" class="box a1" id="data2"><span class="border rounded-circle letter" id="q1">W</span> Verspätung</a></div>
<div class="col-lg-4 dataset"><a href="#" class="box a1" id="data2"><span class="border rounded-circle letter" id="q2">D</span> Flughafen</a></div>
<div class="col-lg-4 dataset"><a href="#" class="box a1" id="data2"><span class="border rounded-circle letter" id="q3">S</span> Fallschirm</a></div>
</div>

</div>

Es stehen je 3 Antworten zur verfügung. Wird eine angeklickt, wird sie markiert. wird eine andere Lösung angeklickt, soll die vorhergehende wieder 'normal' erscheinen und die neu angeklickte markiert.
Das soll immer nur pro Zeile (Frage/ Antworten) passieren.

Sempervivum · 20.03.2024, 14:01

Danke, jetzt ist das Ganze klar geworden.
Dieses Javascript müsste das tun, was Du dir vorstellst:

Code:
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Q&A</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"

        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

    <style>

        .dataset.clicked {

            background-color: lightblue;

        }

    </style>

</head>

<body>

    <div class="row parent">

        <div class="col-lg-12 frage">Was bedeutet der Begriff Delay in der Fliegersprache?</div>

        <div class="col-lg-4 dataset"><a href="#" class="box a1" id="data2"><span class="border rounded-circle letter"

                    id="q1">W</span> Verspätung</a></div>

        <div class="col-lg-4 dataset"><a href="#" class="box a1" id="data2"><span class="border rounded-circle letter"

                    id="q2">D</span> Flughafen</a></div>

        <div class="col-lg-4 dataset"><a href="#" class="box a1" id="data2"><span class="border rounded-circle letter"

                    id="q3">S</span> Fallschirm</a></div>

    </div>

    <script>

        // Eventlistener für Klick irgend wo auf der Seite registrieren:

        window.addEventListener('click', event => {

            // Elternelement mi der Klasse "parent" 

            // und Element mit der Antwort ermitteln:

            const

                parent = event.target.closest('.parent'),

                answer = event.target.closest('.dataset');

            //Existiert beides? In dem Fall wurde eine Antwort geklickt.

            if (parent && answer) {

                // Ggf. bei einer Antwort, die zuvor geklickt wurde,

                // die Klasse "clicked" löschen:

                const

                    lastClicked = parent.querySelector('.dataset.clicked');

                if (lastClicked) lastClicked.classList.remove('clicked');

                // Bei der jetzt geklickten Antwort die Klasse "clicked" 

                // hinzu fügen:

                answer.classList.add('clicked');

            }

        });

    </script>

</body>

</html>

Anmerkungen:

Eine ID muss dokumentweit eindeutig sein, die ID "data2" wird jedoch mehrfach zugewiesen. Möglicher Weise gilt das auch für "q1", "q2" und "q3" wenn sie in den nächsten Zeilen ebenfalls zugewiesen werden.
<a href="#" wird zwar häufig so verwendet und funktioniert, macht aber keinen Sinn, weil es sich nicht um einen Link handelt.

saturnus · 22.03.2024, 06:55

Ja, mit Deinem Input hat es nun geklappt. :-)
Vielen Dank für Deine Unterstützung!

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken