Javascript-forum › Entwicklung › Javascript v
Class in PHP While ansprechen

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Baumstrukturmodus
Class in PHP While ansprechen
saturnus Offline
Junior Member
**
Beiträge: 3
Themen: 1
Registriert seit: Mar 2024
Bewertung: 0
#1
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:
<?php 

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!
Suchen Bewerten
Zitieren
Sempervivum Offline
Member
***
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung: 10
#2
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?
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Suchen Bewerten
Zitieren
saturnus Offline
Junior Member
**
Beiträge: 3
Themen: 1
Registriert seit: Mar 2024
Bewertung: 0
#3
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.
Suchen Bewerten
Zitieren
Sempervivum Offline
Member
***
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung: 10
#4
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.
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Suchen Bewerten
Zitieren
saturnus Offline
Junior Member
**
Beiträge: 3
Themen: 1
Registriert seit: Mar 2024
Bewertung: 0
#5
22.03.2024, 06:55
Ja, mit Deinem Input hat es nun geklappt. :-)
Vielen Dank für Deine Unterstützung!
Suchen Bewerten
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
2 Gast/Gäste