时间戳

首页 > 解决方案 > PHP，Javascript - 独立地将日期输出到“每个”网格

javascript - PHP，Javascript - 独立地将日期输出到“每个”网格

问题描述

基本上，当我单击 item6 中的每个新图像时，我想将日期输入到“item5”中flavour。（以及它切换图像，因为我有它）。我现在设置它的方式确实如此 - 但它只发生在类的第一个实例中。我希望它进入每个新容器，就像我使用 src-change 函数一样（这种不使用 ID 的方法对我来说是新的）。但是，我不知道如何将日期转发到每个新实例的 item5 中。我需要重新调整我的代码，还是我在这里遗漏了一些简单的东西？

<?php
  $FLAVOUR = $_GET['flavour'];

  $stmt = $conn->prepare("SELECT * FROM node WHERE node.flavour = :flavour");
  $stmt->bindValue(':flavour',$FLAVOUR);
  $stmt->execute();

  $flavours = $stmt->fetchALL();
  echo "<div class='grid-container'>";
  echo "<div class='item1'>Header</div>";
  echo "</div>";

  if($flavours){
    foreach ($flavours as $flavour) {
      echo "<div class='grid-container'>";
      echo "<div class='item2'><img src='{$flavour['image']}'></div>";
      echo "<div class='item3'>{$flavour['flavour']}</div>";
      echo "<div class='item4'>{$flavour['area']}, <button class='btn' data-clipboard-text='{$flavour['link']}'>{$flavour['waypoint']}</button></div>";
      echo "<div class='item5'><p id='p1'></p></div>";
      echo "<div class='item6'><img src='https://i.imgur.com/yymBeSS.jpg' onclick='checkAtreyu(this)'  /></div>";
      echo "</div>";
    }
    echo "";
  }
else
{
  echo "<p>Can't find any destination records.</p>";
}
?>

javascript:

<script language="javascript">
    function checkAtreyu(element) {

        if (element.src == "https://i.imgur.com/yymBeSS.jpg") 
        {
            element.src = "https://i.imgur.com/ZlTnzBL.jpg";
            document.getElementById("p1").innerHTML = Date();
            //element.innerHTML = Date();
        }
        else 
        {
            element.src = "https://i.imgur.com/yymBeSS.jpg";
        }
    }
</script>

标签： javascriptphphtmlforeachelement

解决方案

假设元素结构保持一致，您可以基于当前元素引用其他元素。

试试下面的例子。（没有用于此处理的元素 id）

function checkAtreyu(element) {

    if (element.src == "https://i.imgur.com/yymBeSS.jpg") 
    {
        element.src = "https://i.imgur.com/ZlTnzBL.jpg";

      // <img>   item6 <div>      item5 <div>         <p> tag
        element.parentElement.previousElementSibling.firstChild.innerHTML = Date();

        //document.getElementById("p1").innerHTML = Date();
        //element.innerHTML = Date();
    }
    else 
    {
        element.src = "https://i.imgur.com/yymBeSS.jpg";
    }
}
<div class='item5'><p></p></div>
<div class='item6'><img src='https://i.imgur.com/yymBeSS.jpg' onclick='checkAtreyu(this)'  /></div>
<hr>
<div class='item5'><p></p></div>
<div class='item6'><img src='https://i.imgur.com/yymBeSS.jpg' onclick='checkAtreyu(this)'  /></div>

推荐阅读