javascript - querySelectorAll 或任何其他返回多个元素的方法 - 不起作用

Question

我想获取用户用 php 编写的一些帖子，并用 JavaScript 编写一个函数，该函数应该在第 50 个字符之后剪切帖子，并添加三个点 (...)。如果我使用 querySelector() 或 getElementById() ，一切都工作正常，但我无法使其与任何多元素选择方法(如 querySelectorAll() 或 getElementsByClassName())一起使用。页面上有一些帖子，我需要将它们全部选择。

这是使用 PHP 编写的 HTML:

 <?php while ($post = mysqli_fetch_assoc($result_posts)) : ?>
 <div class="card p-0 m-0 mt-3">
  <div class="card-header  text-white">
    <span>
       <?= $post['title'] ?>
    </span>
 </div>
   <div class="card-body">
     <p class='article'>
        <?= $post['article'] ?>
          </p>
     </div>
   </div>
<?php endwhile ?>

渲染后的 HTML

<div class="card-header  text-white">
<span>Title </span>
</div>
<div class="card-body">
<p class="text-left article" id="article">
Article</p>
</div>

JS函数:

function cutLongString() {

    var article = document.querySelector('.article').textContent

    if (article.length > 50) {
      document.querySelector('p').innerHTML = article.slice(0, 49) + '...';
    } else {
      console.log(article)
    }
}
cutLongString()

正如我所说，这种方式是有效的，但是如果我将 querySelector 更改为多元素选择方法，它会显示“文章未定义”。

Answer 1

您必须遍历所有元素并一一设置新的 textContent 值:

function cutLongString() {
  const articles = document.querySelectorAll('.article')
  Array.from(articles).forEach(a => {
    if (a.textContent.length > 50) {
      a.textContent = a.textContent.slice(0, 49);
    }
  })
}

cutLongString();

<div class="card p-0 m-0 mt-3">
  <div class="card-header  text-white">
    <span>Title </span>
  </div>
  <div class="card-body">
    <!--Dont assign multiple elements to the same ID. Remove the id="article" below from the <p/>-->
    <p class="text-left article" id="article">Article</p>
  </div>
</div>
<div class="card p-0 m-0 mt-3">
  <div class="card-header  text-white">
    <span>Title </span>
  </div>
  <div class="card-body">
    <p class="text-left article" id="article">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
  </div>
</div>

希望这有帮助，