Question

页面上的图像数量不确定，并且有1个模态。我可以使用这些图像打开此1模态，但是我希望能够知道单击了哪个图像，因此我可以使用此信息在模态的SQL查询中检索更多信息。

我发现了以下信息：https://stackoverflow.com/a/25060114/7183609，但此处信息被传递到输入字段，而不是PHP值。

这是我的图片代码：

<?php
    for ($i=0; $i < count($products); $i++) {
    ?>
    <article class="<?php echo $products[$i]['style'];?>">
        <span class="image">
            <img src="<?php echo $images[$i]['location'];?>" alt="" data-toggle="modal" data-target="#exampleModal" />
        </span>
        <a style="pointer-events: none; cursor: default;" href="">
            <h2><?php echo $products[$i]['title']; ?></h2>
            <div class="content">
                <p>
                    1000gr €<?php echo $products[$i]['prijs1000gr'];?>
                    <br />
                    500gr €<?php echo $products[$i]['prijs500gr'];?>
                </p>
            </div>
        </a>
    </article>
    <?php
    }
    ?>

并且我现在使用基本的引导程序模式：

<!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

我怀疑是否可以采用1种模式，而且我认为我可能需要多种模式，但我不是html / php / javascript

的专家

Answer 1

为了使HTML / javascript将信息传递给PHP，您应该使用AJAX。运作方式如下：

html -浏览器端-显示页面元素和值
javascript -浏览器端-检测用户事件（按钮单击，下拉选项），并且（一旦事件发生）可以运行一些代码来完成操作
PHP -服务器端-最初将页面内容（HTML / javascript / CSS代码）发送到浏览器，并且可以将内容存储在数据库中，等等）

AJAX -一种使用javascript与PHP进行通信以与数据库进行交互或执行其他后端操作的方法。 通过ajax，js代码可以将信息发送到后端php文件，使其进行查找（例如）并发送回一些数据，然后js（仍在运行）可以更新页面。

但是您不能只是将它们发送给PHP ... ，就像两者之间存在自然联系一样。为此，您需要编写一个通常涉及ajax的过程-在PHP方面，您必须接收数据并对其进行处理。

由于javascript（jQuery）可以检测到用户事件（例如，单击图像），因此您可以使用js获取图片的ID，然后使用AJAX将其发送到后端PHP文件-然后可以执行此操作东西。

简单的代码示例：

/*
  Example just demonstrates what jQuery looks like, and how js detects events
*/
$('img').click(function(){
  tmp = this.id;
  $('#msg').html(tmp).removeClass('hid').addClass('wow');
  /* THIS part sends the ID to the back-end PHP file */
  $.ajax({
    type:'post',
     url:'name_of_your_php_file.php',
     data: 'id:' +tmp
  });
  setTimeout(function(){
    $('#msg').html('The ID was transmitted to a non-existent back-end php file');
  },500);
});

$('#msg').click(function(){
  $(this).removeClass('wow').addClass('hid');
});

*{}
#msg{position:fixed;top:0;width:40vw;height:30vh;background:#00f;opacity:0.5;}

.hid{display:none;}
.wow{padding:30vh 30vw;color:yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<img id="img_41" src="https://placeimg.com/140/80/any" />

<div id="msg" class="hid"></div>

Answer 2

wes

您创建了一个JS函数，并在单击每个图像时获得src并将其传递给模态主体。

<img src="..." class="setImage">

$('.setImage').click(function(event){
    event.preventDefault();
    var e = $(this);
    var title = 'set modal title here';
    var body = 'set modal body here';
    var modal = $('#exampleModal');

    modal.find('.modal-title').html(title);
    modal.find('.modal-body').html(body);
    modal.modal("show");
});

将var传递给引导程序模式，其中php将使用此值

2 个答案: