切换包含内部 HTML 元素的 <span> 文本

Question

单击按钮时，我想将其文本从 'View More' 切换为 'View Less'。但是，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>

Answer 1

这可以使用 JQuery 的 html() 函数修复。这将具有与 text() 函数相同的功能，但添加了设置 html 元素的选项。

This link 为您提供 JQuery 文档。

Answer 2

当您将图标置于范围之外时，它会像您期望的那样工作：

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

Answer 3

如何将要更改的文本包装成一个带有 id 的自己的 span？那么你可以在不触摸 fontawesome 图标的情况下更改文本

Answer 4

我会简单地向文本添加一个 data 属性并仅切换该部分而不是试图使事情复杂化，如下所示：

$('.button').click(function() {
    $('.button i').toggleClass('fa-angle-up fa-angle-down');
   
    const currentText = $('[data-view-more]').text();
    const updatedText = currentText === 'View More' ? 'View Less' : 'View More';
    $('[data-view-more]').text(updatedText);
});

.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>
    <span data-view-more>View More</span>
    <i class="fas fa-angle-down"></i>
  </span>
</button>

如您所见，我现在在切换文本时瞄准 data-view-more 文本，然后我瞄准图标来切换它。

Answer 5

$('.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>

Answer 6

只是为了好玩和想法：没有 jquery，使用 event delegation and a data-attribute 切换文本和图标

document.addEventListener("click", handle);

function handle(evt) {
  const bttn = evt.target.closest("[data-view]");
  return bttn 
    ? toggleBttn(bttn, bttn.dataset.view === "more")
    : true;
}

function toggleBttn(bttn, isClosed) {
  let classes = ["fa-angle-down", "fa-angle-up"];
  classes = isClosed ? classes : classes.reverse();
  bttn.querySelector("i").classList.replace(...classes);
  bttn.dataset.view = isClosed ? "less" : "more";
}

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

[data-view]:before {
  content: 'view 'attr(data-view);
  margin-right: 10px;
}

<script src="https://kit.fontawesome.com/a671c6b423.js" crossorigin="anonymous"></script>

<button type="button" data-view="more" class="button">
  <i class="fas fa-angle-down"></i>
</button>

切换包含内部 HTML 元素的 <span> 文本

Toggle <span> text which contains inner HTML element

html

javascript

css

jquery

toggle