Tabula_Rasa
Mitglied
Hallo,
ich habe eine Popup-Klasse erstellt, die dafür sorgt, dass beim Click ein Video erscheint.
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..
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">✖</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: