Question

我正在使用此代码在p标签中获取最多文本。出于这个原因，这个代码只能在我的foreach中的第一张卡上运行，而不是在第二张卡上运行。

在这里您可以看到问题：https://gyazo.com/c3ef858fb233b21b31098fb1682a7ce4

这是我的javascript代码：

<script>
    function truncateText(selector, maxLength) {
        var element = document.querySelector(selector),
            truncated = element.innerText;

        if (truncated.length > maxLength) {
            truncated = truncated.substr(0,maxLength) + '...';
        }
        return truncated;
    }
</script>

[PHP代码]

  <?php
     $stmt = $conn->prepare("SELECT naam, prijs, beschrijving, id, image1 FROM salontafels");
     $stmt->execute([]);
     $rows = $stmt->fetchAll();

     foreach ($rows as $row) : { ?>
         <a class="formtitellink" href="productsalontafels.php?rowid=<?= $row['id'] ?>">
     <?php } echo '

           <div class="col-lg-4 col-md-6 mb-4">
              <div class="card h-100">
                 <img class="card-img-top" src="data:image/jpeg;base64,' . base64_encode( $row['image1'] ) . '" />
                  <div class="card-body">
                  <h4 class="card-title">
                      <a href="">' .  $row['naam'] . '</a></a>
                  </h4><script>    document.querySelector(\'p\').innerText = truncateText(\'p\', 100);</script>
                  <h5><a href="../login/index.php"> Log in </a>voor de prijs </h5>
                  <p class="card-text">' .  $row['beschrijving'] . '</p>
              </div>
              <div class="card-footer">
                  <small class="text-muted">beschikbaar</small>
              </div>
            <!-- /.row -->
       </div>
        <!-- /.col-lg-9 -->
           </div>'?>

有谁知道出了什么问题？

Answer 1

您的问题是document.querySelector('p')返回文档中与指定选择器匹配的第一个元素。因此，它只会在每次运行时返回第一个p标记。

这意味着这两行是你的问题：

document.querySelector(\'p\').innerText = truncateText(\'p\', 100)

和

var element = document.querySelector(selector)

要解决此问题，您需要每次都选择您感兴趣的特定元素

[如果你想要工作代码，而不是问题的答案，我建议你只使用substr($row['beschrijving'],0,100)]

Javascript无法使用PHP foreach？

1 个答案: