时间戳

首页 > 解决方案 > querySelectorAll 或返回多个元素的任何其他方法 - 不起作用

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

问题描述

我想获取用户使用 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 更改为多元素选择方法，它会显示“文章未定义”。

标签： javascriptphphtml

解决方案

您必须遍历所有元素并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>

希望这可以帮助，

推荐阅读