• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Popup-Content, Problem mit der ID

T

Tabula_Rasa

Mitglied
Hallo,

ich habe eine Popup-Klasse erstellt, die dafür sorgt, dass beim Click ein Video erscheint.

HTML: 
<div class="modal" id="myModal">
  <div class="modal-content">
    <span class="close">&#10006;</span>
  <div class="embed-responsive embed-responsive-16by9">
    <div class="embed-responsive-item">
      <iframe id="iframe_id"  allowfullscreen></iframe>
      </div>
  </div>
  </div>
</div>





  <br><br>
  <div class="row" id="musicrow">
    @if (count($musics) > 0) @foreach ($musics as $music)
    <div class="col-6 col-sm-4 col-md-3 col-lg-3 col-xl-3 button"  id="elements" onmouseover="this.style.border='1px solid grey';" onmouseout="this.style.border='none';">
      <img data-wert="https://www.youtube.com/embed/{{$music->embed_yt}}" src="{{$music->pic_path}}" style="width:100%;height:250px;" alt="time" id="pic">
      <br><br>
      <h3>{{$music->title}}</h3>
      <p style=" color: #bbbbbb;">{{$music->tag}}</p>
      @if(!Auth::guest()) @if(Auth::user()->id == $music->user_id) {!!Form::open(['action' => ['MusicsController@destroy', $music->id], 'method' => 'POST', 'class' => 'float-right'])!!} {{Form::hidden('_method', 'Delete')}} {{Form::submit('Delete', ['class'=>'btn
      btn-danger'])}} {!!Form::close()!!}
      <a type="button" class="btn" href="/musics/{{$music->id}}/edit" style="float:right;">Edit</a> @endif @endif
    </div>
    @endforeach
    <script>

    $('img').click(function() {
      $('#iframe_id').css('display', 'block');
      j = $(this).data('wert');
      $('#iframe_id').attr('src', j)
    });


    var modal = document.getElementById('myModal');


     var btn = document.getElementById("elements");


    var span = document.getElementsByClassName("close")[0];


    btn.onclick = function() {
        modal.style.display = "block";
    }


    span.onclick = function() {
        modal.style.display = "none";
    }


    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }


</script>

Ich kann nur das erste Element anklicken und ein Video öffnet sich. Ich kann es wieder schließen und erneut öffnen. Bei den anderen Elementen funktioniert es nicht.

Ich bin mir sicher, dass das Problem im Javascript Code liegt. Aus Mysql weiß ich, dass eine Id ein Element genau identifiziert und es kein weiteres Element gibt, das von derselben Id identifiziert wird. Da ich durch die Datenbank loope, erhält jedes neue Element dieselbe Id, was nicht sein darf und nur das erste Element wird der Id "elements" zugeordnet - das denke ich zumindest. Wie kann ich das Problem lösen?

Ich habe daran gedacht statt document.getElementbyId mit document.getElementsByClassName zu wechseln, aber das funktioniert nicht.

EDIT: Ich könnte zwar um die ganze Row Klasse mit dem span tag umschließen und ihm eine id geben aber dann wäre auch der teil anklickbar der keine elemente hat..
 
Zuletzt bearbeitet:
Werbung:
Tabula_Rasa schrieb:
Da ich durch die Datenbank loope, erhält jedes neue Element dieselbe Id, was nicht sein darf und nur das erste Element wird der Id "elements" zugeordnet - das denke ich zumindest. Wie kann ich das Problem lösen?
.
Zum Vergrößern anklicken....

Jeden eine id geben die einmalig ist .
Zb wenn man eine Schleife hat ,gibst du der Id eine Fortlaufene Nummer.
Code: 
for(a=0;a<=10;a++){
ausgabe+='<div id="meineid'+a+'"> bla blub</div>';
}
Das geht bei der Datenbank Ausgabe ja auch und so weiter,
die kannst du dann später auch so abrufen
Code: 
document.getElementById('meineid0');
document.getElementById('meineid1');
document.getElementById('meineid2');
usw
Oder auch mit einer Schleife,das spart Code.


Oder wie du sagst mit ClassName wäre auch noch nee möglichkeit
 
basti1012 schrieb:
Jeden eine id geben die einmalig ist .
Zb wenn man eine Schleife hat ,gibst du der Id eine Fortlaufene Nummer.
Code: 
for(a=0;a<=10;a++){
ausgabe+='<div id="meineid'+a+'"> bla blub</div>';
}
Das geht bei der Datenbank Ausgabe ja auch und so weiter,
die kannst du dann später auch so abrufen
Code: 
document.getElementById('meineid0');
document.getElementById('meineid1');
document.getElementById('meineid2');
usw
Oder auch mit einer Schleife,das spart Code.


Oder wie du sagst mit ClassName wäre auch noch nee möglichkeit
Zum Vergrößern anklicken....

Ich versuche es mal, auch wenn ich (noch) nicht ganz auf dem Niveau bin. Aber interessant wäre der ClassName... Mit der Id funktioniert es aber mit der Klasse nicht wirklich. Aus welchem Grund passiert das? Wie würdest du das mit der Klasse machen?
 
Werbung:
Sempervivum schrieb:
Was bedeutet denn dieses?:
Code: 
@if(!Auth::guest()) @if(Auth::user()->id == $music->user_id)
Template? CMS? Laravel?

Und warum brauchst Du zwei Klick-Handler, img und btn?
Zum Vergrößern anklicken....
Laravel: wenn ich eingeloggt also authorisiert bin, erscheinen zwei Buttons einmal zum editieren und zum löschen.

Für das Design hab ich einige Bilder, die als Button dienen sollen, also "aufgehübschte button" - so habe ich mir das vorgestellt. Eigentlich bräuchte btn nicht wenn ich so recht überleg
 
Sempervivum schrieb:
Verstehe, Du erzeugst also ein Formular

Verstehe ich noch nicht. Wenn ich das richtig sehe, muss der Benutzer zweimal klicken: img, um iFrame sichtbar zu machen und URL des Videos einzutragen; btn, um das Modal sichtbar zu machen?
Zum Vergrößern anklicken....
Es soll wie folgt funktionieren: Es sind Bilder abgebildet mit verschiedenen data-werten. Bei einem Klick öffnet sich das Modal mit dem zum Wert dazugehörigen Youtube Video- also eingebundenes Video.
 
Werbung:
Eine generelle Frage hätte ich da noch:

Code: 
<script type="text/javascript">

function showLyrics(){
  var x = document.getElementById("lyrics");
  var btn = document.getElementById("mybtn");

  if (x.style.display == 'none'){
    x.style.display = "block";
    btn.innerHTML = "Hide lyrics";
  } else {
    x.style.display = 'none';
    btn.innerHTML = "Show lyrics";
  }

}
</script>
Die Id dient ja zu eindeutigen Identifizierung. Das heißt, wenn man loopen würde, würde das erste Element mit der Id versehen und nur das Element wird beim Click, egal auf welches Element man auch klicken mag, angezeigt. Mit der Klasse wäre das etwas anders. Zwar hätte man nach dem Loopen immer dieselbe Klasse aber der Inhalt unterscheidet sich. Das bedeutet, das Problem mit der Id wäre gelöst. Jedoch funktioniert es nicht wenn ich es mit der Klasse versuche. Wie müsste der obige Code aussehen, wenn die Klasse "lyrics" hieße und nicht die Id?
 
???
Tabula_Rasa schrieb:
Eine generelle Frage hätte ich da noch:
Wie müsste der obige Code aussehen, wenn die Klasse "lyrics" hieße und nicht die Id?
Zum Vergrößern anklicken....


Klasse != document.getElementById("lyrics");
Klassen == document.getElementsByClassName('lyrics')[l0];

Du versten.?
Auserdem mus du bei nativen Javascript das dann durch die Schleife laufen lassen
Meine Zeile sagt jetzt das erste Element mit den Classname="lyrics" angesprochen wird. Bei einer 1 dann das zweite usw.
 
basti1012 schrieb:
???



Klasse != document.getElementById("lyrics");
Klassen == document.getElementsByClassName('lyrics')[l0];

Du versten.?
Auserdem mus du bei nativen Javascript das dann durch die Schleife laufen lassen
Meine Zeile sagt jetzt das erste Element mit den Classname="lyrics" angesprochen wird. Bei einer 1 dann das zweite usw.
Zum Vergrößern anklicken....
Ich weiß, dass document.getElementById sich nicht um eine Klasse handelt, das wird einem schnell klar, da "Id" auftaucht. Ich wollte nur wissen, wie der Code aussehe, wenn lyrics keine id wäre, sondern eine Klasse. Also ich habe es jetzt verstanden. Die Indexierung ist wichtig. Ich nahm an, dass man nicht jede einzelne Klasse ansprechen muss. Auch wenn dein Beitrag herabwürdigen Ton aufwies, bedanke ich mich dennoch für die hilfreiche Antwort.

Edit: jetzt verstehe ich auch document.getElementsByClassName. Es werden mehrere Klassen angesprochen (Elements plural) und deshalb muss man konkret eine Klasse auswählen und dies tut man mit Indizes ([0], [1] usw)
LG
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben