Question

我创建了一篇文章，每篇文章都有一个id。我做了一个模态窗口，用于查看模态窗口内的详细文章，你可以插入注释，喜欢文章，但问题是，当我试图点击其他文章时，他得到的id只是创建的第一个id。我是我想做的是，当我试图点击文章时，它会获得文章ID并将其显示给模态。

这是我的示例代码。

这是我点击给我显示模态窗口的按钮

 span style="color:#59960b;" class="read" data-toggle='modal' data-target="#myModal">Read more..</span><input type="hidden" value="<?php echo $articleid; ?>"></span>

MODAL WINDOW

     <?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>
        <div class="modal-body">
            <div align="center"  style="color:#222;">   
                    <strong class="font-2" id="title"><?php echo $arttitle ?></strong>
        <?php }?>
        <?php

        foreach ($db->countarticlecomment($articleid) as $value) {

        ?>

        <span class="font-1-2" style="margin-right:10px;">
        <i class="fa fa-comment" style="color:#59960b;"></i> <span style="color:gray;"><b><?php echo $value['comments']?></b></span>&emsp;

        </span>
        <hr>
        <?php  }?>
        </div>
    </div>
<?php 
        $out = $db->articleviewcount($articleid);
        foreach ( $db->viewarticlecomment() as $value) {
        if($articleid = $value['artid']){
        ?>

        <div  id="mycomments"  class="col-lg-8" style="background:#eff9c7;color:#222;margin-left:170px">
        <span class="" style="margin-left:10px;font-size:.9em;color:gray;"><abbr class="timeago" title="<?php echo $value['artsend']?>"></abbr></span> 
        </p>
    </div>

    <?php
        }   
    }
    ?>
    <div class="col-lg-8" style="background:#eff9c7;margin-left:170px">
                        <br>
    <input type="text" name="artcomment" id="artcomment"  class="form-control pull-right" style="width:92%;margin-top:5px;margin-bottom:10px;" placeholder="Comments..." />
                        <br><br>
                    </div>

            <?php endforeach ?>
                <br>
         <div class="row">

        </div>
        <br> 
      </div>
    </div>
  </div>

如何获取$ articleid的值，以便当我单击其中一篇文章时，它会将（id）值发送到模态窗口，以便文章的id将是显示的那个。我尝试使用jquery获取$ articleid并且它可以工作，但我的问题是如何使用我的jquery中的id到我的模态？我试着搜索，他们说要用ajax。我也尝试了它并在变量中声明了我的模态窗口，但我担心的是我的模态里面有2个forloops，当我尝试使用jquery函数时，只有最新文章可点击而不是其他文章。即使我能得到文章的内容，如果我不能点击其他文章，它也不会有任何意义。所以有什么方法可以获得id并在模态中使用它..？顺便说一下这个脚本都在1php文件里面。

Answer 1

我建议您使用全局数据属性将文章ID发送到模态。您可以在此处了解数据属性：

https://www.w3schools.com/tags/att_global_data.asp

以下是显示数据属性如何工作的代码段。

您会注意到该按钮中有一个名为data-articleid的自定义数据属性，我已将其设置为xyz。您可以将其值设置为<?php echo $articleid ?>。我不能在这里使用php。

单击按钮openBtn时，将调用一个函数，名为articleId的变量将获取属性data-articleid的值，然后在其中设置title的文本articleId的模态。

＆＃13;

// function to open the modal, get the data attribute, and set the title text
$('#openBtn').click(function() {
  $('#myModal').modal('show');
  var articleId = openBtn.getAttribute("data-articleid");
  $('#title').text(articleId);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<!-- Trigger the modal with a button -->
<!-- I can't use php in this snippet so I'm just hardcoding a data-articleid of "xyz".  You should echo your article id instead. -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-articleid="xyz" id="openBtn">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="title"></h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

＆＃13;

Answer 2

也许您可以将所有文章作为自己的模态输出并为其指定自己的ID，以便它们不会被命名为// Verbose let myVar: { a: number; b: number; } | null = { a: 1, b: 2 }; // Bad, same as having no type let myVar: any| null = { a: 1, b: 2 };（myModal），而是{ {1}}，<div id="myModal等。

然后链接看起来像这样

myModal1

如果您没有太多文章，这将有效，如果有大量数据，您应该使用Ajax。

我如何从一个范围中获取php值（id）并在模态窗口中使用它

2 个答案: