Проблема возникает, чтобы показать динамическое содержимое с помощью jquery?

Проблема возникает, чтобы показать динамическое содержимое с помощью jquery?

16.11.2019 10:03:28 Просмотров 52 Источник

Я попытался показать динамическое содержимое на 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>
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/58888382/problem-occurs-to-show-dynamic-content-using-jquery#comment104042988_58888382
Вы, кажется, используете '#' для ссылки на классы. Использовать.' ' вместо. find ('#student-name') изменить на find('.студент-имя') например

Ответы - Проблема возникает, чтобы показать динамическое содержимое с помощью jquery? / Problem occurs to show dynamic content using jquery?

lagbox

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);
https://stackoverflow.com/questions/58888382/problem-occurs-to-show-dynamic-content-using-jquery/58888483#comment104043341_58888483
Все еще не работает.
rashedcs

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');
       });
  });
Закрыть X