javascript - 如何从模态中获取特定的 id 以显示特定的详细信息

Question

我创建了一篇文章，并使用模式我可以查看该文章，但问题是当我尝试查看该文章时，仅显示第一篇文章。不是特别是我单击的那个。我注意到我声明的变量只获取第一个 id。

            <?php
                include_once('../model/articles.php');
                $database = new Database();
                $conn= $database->getConnection();
                $db= new articles($conn);
                $output = $db->viewAllarticles();
                $articleid ='';
                $artname = '';
                $artpublished = '';
                $arttitle= '';
                $artbody = '';
                foreach ($output as $key) {
                        $articleid = $key['art_id'];
                        $artpublished = $key['date_published'];
                        $arttitle = $key['art_title'];
                        $artbody =$key['art_body'];
                    if($key['art_isSaved'] == '0'){
            ?>
            <style>
                .ellipsis {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            </style>
            <div id="article" class="col-lg-4" style="background:#f9f9f9;width:218px;margin-right:10px;">

            &emsp;<strong class="font-1"><?php echo $key['firstname'].' '.$key['lastname'] ?></strong><br>
          <?php echo $key['art_body']?><br>
          <?php
        <i class="fa fa-eye"></i> <?php echo $key['art_seen']?>
        <span class="pull-right"><span style="color:#59960b;" data-toggle="modal" data-target="#myModal">Read more..</span><input type="hidden" value="<?php echo $articleid; ?>">  </span>

            </div>
            <?php       
                }
                }
                ?>

我想做的是，当我单击“阅读更多”时，我单击的 ID 将被发送到模式。

<div class="modal fade margin-top-70" id="myModal" role="dialog" style="margin-left:-50px;">
    <div class="modal-dialog">
     <?php
        $output = $db->viewArticle($articleid);
            foreach ($output as $key):
                if($key['art_id'] == $articleid){   
            ?>
          <!--view Modal content-->
          <div id="articlepost" class="modal-content-article">
            <div class="modal-header-article">
                <input type="hidden" name="aid" id="aid" value="<?php echo $articleid ?>"/>
        <button type="button" style="padding-left:1155px;position:fixed;" class="close" data-dismiss="modal">&times;</button>
            </div>
        <img src="./<?= $key['art_cphoto'];?>" style="margin-left:100px;"/>
        <div class="modal-body">
        <div align="center"  style="color:#222;">   
        <strong class="font-2" id="title"><?php echo $arttitle ?></strong>
                <br>
            </div>
    <?php }?>
  </div>
</div>

我尝试使用 javascript 来获取文章的 id 并且它有效，但问题是我不知道如何使用 javascript 中的变量将其声明到我的 php if 条件...你知道如何使用吗我可以获取特定文章的 ID，以便当我单击该文章时，我单击的文章将成为显示的文章吗？？？

Answer 1

发生这种情况是因为您使用了重复的模态 ID。您必须使 Modal Id 独一无二，如下所示:

<span class="pull-right" id="artid"><span style="color:#59960b;" class="read" data-id="myModal_<?php echo $articleid; ?>">Read more..</span><input type="hidden" value="<?php echo $articleid; ?>"> </span>

<div class="modal fade margin-top-70" id="myModal_<?php echo $articleid; ?>" role="dialog" style="margin-left:-50px;">
    <div class="modal-dialog">
     <?php
        $output = $db->viewArticle($articleid);
            foreach ($output as $key):
                if($key['art_id'] == $articleid){   
            ?>
          <!--view Modal content-->
          <div id="articlepost" class="modal-content-article">
            <div class="modal-header-article">
                <input type="hidden" name="aid" id="aid" value="<?php echo $articleid ?>"/>
                  <button type="button" style="padding-left:1155px;position:fixed;" class="close" data-dismiss="modal">&times;</button>
              <img src="./<?= $key['art_cphoto'];?>" style="margin-left:100px;"/>
            </div>
    <?php }?>
  </div>
</div>

用于模式打开的 jQuery:

$("body").on("click",".read",function(){
   var id = $(this).data('id');
   ('#'+id).modal('toggle');
});