javascript - 切换包含内部 HTML 元素的文本

Question

单击按钮时，我想将其文本从“查看更多”切换为“查看更少”。但是，span 元素内部包含另一个元素（Font Awesome 图标）。当我切换 span 元素的文本时，其中的元素会消失。您可以在下面的代码段中看到它。

我也试过这个解决方案：

$('.button span').text(($('.button span').text()=='View More<i class="fas fa-angle-down"></i>') ? 'View Less<i class="fas fa-angle-up"></i>' : 'View More<i class="fas fa-angle-down"></i>');

但是它将 i 元素作为跨度文本插入，而不是作为元素插入。

注意：我不能将 i 元素保留在 span 元素之外，因为我在 CSS 中有某些动画。

$('.button').click(function() {
    $('.button i').toggleClass('fa-angle-up fa-angle-down');
    $('.button span').text(($('.button span').text()=='View More') ? 'View Less' : 'View More');
});

.button {
  width: 250px;
  padding: 12px 0;
  text-transform: uppercase;
  cursor: pointer;
}

.button i {
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a671c6b423.js" crossorigin="anonymous"></script>

<button type="button" name="button" value="" class="button">
  <span>View More<i class="fas fa-angle-down"></i></span>
</button>

标签： javascripthtmljquerycsstoggle

Answer 1

$('.button').click(function() {
    $('.button span').html(($('.button span').text()=='View More') ? 'View Less<i class="fas fa-angle-up">' : 'View More<i class="fas fa-angle-down">');
});

.button {
  width: 250px;
  padding: 12px 0;
  text-transform: uppercase;
  cursor: pointer;
}

.button i {
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a671c6b423.js" crossorigin="anonymous"></script>

<button type="button" name="button" value="" class="button">
  <span>View More<i class="fas fa-angle-down"></i></span>
</button>