如何从span中获取php值(Id)并在模态窗口中使用它？

Question

我创建了一篇文章，每一篇文章都有一个id。我创建了一个模式窗口，用于查看模态窗口中的详细文章，您可以插入注释，就像文章一样，但问题是，当我试图单击另一篇文章时，他获得的id只是我想要做的第一个id，即created.what，当我试图单击该文章时，它将得到文章id并将其显示给模态。

这是我的代码样本。

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

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

模态窗

     <?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将是要显示的id。我尝试使用jquery获取$articleid，但我的问题是如何使用从jquery到我的模式的id？我试着搜索，他们说要使用ajax。我也尝试过，并在一个变量中声明了我的模态窗口，但我担心的是，我的模型内部有两个for循环，而且当我尝试使用jquery函数时，只有最新的文章是可点击的，而不是其他的文章。即使我能得到文章的id，如果我不能点击另一篇文章，那也是毫无意义的。有什么办法能让我得到身份证并在一个模态中使用它吗？顺便说一下，这个脚本都在1php文件中。

Answer 1

我建议您使用Global属性将文章id发送到模式。您可以在这里了解数据属性：

data.asp。

下面是一个代码片段，它展示了数据属性的工作方式。

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

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

​

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

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

​

Answer 2

也许您可以输出所有文章作为他们自己的modals，并为他们分配自己的ID，这样他们就不会被命名为myModal (<div id="myModal)，而是myModal1、myModal2等等。

那么链接将如下所示

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

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