PHP, Javascript - Вывод даты в «каждую» сетку независимо - PullRequest
Новая
       19

PHP, Javascript - Вывод даты в «каждую» сетку независимо

1 голос
/ 24 февраля 2020

По сути, я хочу ввести дату в 'item5', когда я нажимаю на изображение в item6 с каждым новым flavour независимо. (так же это переключение изображения, как оно у меня есть). То, как я это установил в данный момент, так и есть, но это происходит только в первом экземпляре класса. Я хотел бы, чтобы он входил в каждый новый контейнер, как я использую функцию sr c -change (этот метод неиспользования идентификаторов является новым для меня). Однако я не могу понять, как пересылать дату в 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>

1 Ответ

2 голосов
/ 24 февраля 2020

Вы можете ссылаться на другие элементы на основе текущего элемента, предполагая, что структура элемента остается согласованной.

Попробуйте пример ниже. (идентификатор элемента не используется для этой обработки) 

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