Проблема возникает, чтобы показать динамическое содержимое с помощью jquery?
Я попытался показать динамическое содержимое на bootstrap modal с помощью jquery. Но модальное не показывает имя и content.It просто покажите пустой. Пожалуйста, скажите мне, как исправить эту ошибку. Заранее спасибо.
@foreach($data as $items)
<div class="col-sm-4">
<div class="team-box">
<div class="team-img student-image" >
<img src="{{asset('photos' . $items->image)}}>
</div>
<div class="team-info">
<h3>
<span class="student-id">{{ $items->$id }}</span>
<span class="student-name">{{ $items->$name }}</span>
</h3>
<ul>
<li><b>Email</b>: {{ $items->email }}</li>
<li><b>Mobile</b>: {{ $items->$mobile }}</li>
<li>
<span id="student-description" hidden>{{ $student->$description }}</span>
</li>
</ul>
</div>
</div>
</div>
@endforeach
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-name" id="myModalLabel">
</h4>
</div>
<div class="modal-body">
<div class="col-md-12" id="modal-content">
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.student-image').on('click', function ()
{
var description = $(this).parent().find('#student-description').html();
var name = $(this).parent().find('#student-name').html();
$('#myModal').find('#modal-content').html(description);
$('#myModal').find('.modal-name').html(name);
$('#myModal').modal('show');
});
});
</script>
Ответы - Проблема возникает, чтобы показать динамическое содержимое с помощью jquery? / Problem occurs to show dynamic content using jquery?
16.11.2019 10:19:27
Вы, кажется, смешиваете селекторы классов и селекторы идентификаторов. Вы также даете многочисленным элементам один и тот же идентификатор, что не является отличной идеей.
<span id="student-description" hidden>
Должен быть класс student-description:
<span class="student-description" hidden>
Селекторы должны быть выбраны по классу, а не id.
var description = $(this).parent().find('#student-description').html();
var name = $(this).parent().find('#student-name').html();
Должно быть:
var description = $(this).parent().find('.student-description').html();
var name = $(this).parent().find('.student-name').html();
Модальный раздел кода может просто использовать идентификаторы элементов, которые вы хотите, так как должен быть только один элемент с любым заданным идентификатором:
$('#myModal').find('#modal-content').html(description);
$('#myModal').find('.modal-name').html(name);
Может быть:
$('#modal-content').html(description);
$('#myModalLabel').html(name);
16.11.2019 12:11:13
Установить продолжительность атрибут, имеющий ID существует в студенческие изображения класса
<div class="team-img student-image" >
<img src="{{asset('photos' . $items->image)}}>
<span id="spanid1" hidden> {{ $student->name }}</span>
<span id="spanid2" hidden> {{ $student->description }}</span>
</div>
Теперь внесите небольшое изменение в код jquery :
$(document).ready(function()
{
$('.student-image').on('click', function ()
{
var name = $("#spanid1").html();
var description = $("#spanid2").html();
if(description != '')
{
$('#myModal').find('#modal-content').html(description);
$('#myModal').find('.modal-title').html(name);
}
$('#myModal').modal('show');
});
});