Question

已提取所有用户图像。这些图像可通过使用标记

该模式似乎工作正常，但数据传输无法正常工作。当我检查检查器元素时。隐藏的数据可用，但不能转移到模态。当将代码用于按钮时，此代码有效，但是当我尝试使用来实现此目的时，也是如此。不再起作用了。对不起，关于modal和PHP的冗长代码。

edit（id）-模式

缩短代码JS：

$(document).ready(function(){
$(document).on('click', '.image-button', function(){

    var id=$(this).val();
    var insModal = $('#instructorname'+id).html();
    var descModal = $('#desc'+id).html();
    var bioModal = $('#bio'+id).html();
    var ownerId = $('#ownerId'+id).html();      
    var position = $('#position'+id).html();        


    $('#imagepreview').attr('src', $('#imageresource'+id).attr('src'));
    $('#eIns').html(insModal);
    $('#eDesc').html(descModal);
    $('#eBio').html(bioModal);
    $('#positionCoach').html(position);
    window.history.pushState( {} , '', '?ref='+ownerId );
    $('#edit').modal('show');
});
});

PHP代码：

       <div id="gallery-container1">
   <div class="row-content1">

            <?php
            try{
            $connect = new PDO("mysql:host=$host;dbname=$database", $username, $password);
            $connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

            $query = "SELECT * FROM ch_users ORDER BY arrangement_id ASC";
            $data = $connect->query($query);
            foreach($data as $instructor_row){
            ?>



            <div class="img-container1">
              <div class="img-content1">
                <a data-toggle="modal" title="<?php echo strtoupper($instructor_row['instructor_name']); ?>" class="image-button" href="#edit">
                  <img src="img/instructor/<?php echo $instructor_row['thumbnail'];?>" class="thumbnail-image">
                  <img src="img/instructor/<?php echo $instructor_row['hover'];?>" class="hover-image">


                 <img class="displaynone" id="imageresource<?php echo $instructor_row['userId']; ?>" src="img/instructor/<?php echo $instructor_row['action']; ?>">
                    <span class="displaynone" id="desc<?php echo $instructor_row['userId']; ?>"><?php echo $instructor_row['description']; ?></span>
                        <span class="displaynone" id="bio<?php echo $instructor_row['userId']; ?>"><?php echo $instructor_row['bio']; ?></span>
                        <span class="displaynone" id="ownerId<?php echo $instructor_row['userId']; ?>"><?php echo $instructor_row['userId']; ?></span>
                        <span class="displaynone" id="position<?php echo $instructor_row['userId']; ?>"><?php echo $instructor_row['position']; ?></span>
                  <b><label class="displaynone" style="color:#fff!important;" id="instructorname<?php echo $instructor_row['userId']; ?>"><?php echo strtoupper($instructor_row['instructor_name']); ?></label></b>

                </a>
              </div>
            </div>


        <?php
                    }//end of foreach
                }//end of try
                catch(PDOException $error)
                {
                    $error->getMessage();
                }
                ?>



   <div class="clearfix"></div>

   </div><!-- #gallery end -->


   </div>

MODAL代码HTML

    <div class="modal fade bd-example-modal-lg" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <br>

            </div>
            <div class="modal-body">
            <div class="container-fluid">

             <div class="containermodal flex-direction">
                  <div class="col-md-5">
                        <img src="" id="imagepreview" class="instructorpic imageModal">
                  </div>
                  <div class="col-md-6">

                        <h1 style="color:#face1d;" id="eIns"></h1>
                        <span style="color:#face1d;" id="positionCoach"></span><BR>
                        <span id="eBio"></span>
                        <BR><BR>
                        <p id="eDesc"></p>
                        <BR>
                        <button class="cycle-button-ride-now btn">BOOK NOW</button>

                        <!--</div>-->
                  </div>
              </div>


            </div>
            </div>
            <div class="modal-footer">
               <br>
            </div>
        </div>
    </div>
</div>

使用图像显示模态JS和PHP

0 个答案: