javascript - 我如何从跨度中获取 php 值(id)并在模式窗口中使用它

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>

模态窗口

     <?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 个 forloop，而且当我尝试使用 jquery 函数时，只有最新的文章是可点击的，其他文章则不然。即使我可以获得文章的 ID，如果我无法单击另一篇文章，它也没有任何意义。那么有什么方法可以获取 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 。

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