Question

我尝试使用jquery在bootstrap modal上显示动态内容。但是模态不显示名称和内容，只显示为空。请告诉我如何解决此错误。预先感谢。

  @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>

Answer 1

您似乎混淆了类选择器和id选择器。您还给了许多元素相同的id，这不是一个好主意。

<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();

代码的模式部分只能使用所需元素的ID，因为应该只有一个具有任何给定ID的元素：

$('#myModal').find('#modal-content').html(description);
$('#myModal').find('.modal-name').html(name);

可能是：

$('#modal-content').html(description);
$('#myModalLabel').html(name);

Answer 2

设置具有ID的span属性，该属性存在于 student-image 类

中

  <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');
       });
  });

使用jquery显示动态内容时出现问题？

2 个答案: