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

【问题标题】：Problem occurs to show dynamic content using jquery?使用 jquery 显示动态内容时出现问题？
【发布时间】：2020-03-12 06:39:16
【问题描述】：

我尝试使用 jquery 在引导模式上显示动态内容。但是模态框不显示名称和内容。它只是显示为空。请告诉我如何解决此错误。提前致谢。

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

【问题讨论】：

您似乎在使用“#”来引用类。采用 '。'反而。例如 find('#student-name') 更改为 find('.student-name')

标签： jquery mysql laravel

【解决方案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);

【讨论】：

【解决方案2】：

在student-image类中设置一个有id的span属性

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

【讨论】：