javascript - 使用 javascript 切换 html 内容

Question

使用此代码(JS)

<script>
  function changeText(element){
        element.innerHTML = "<span class='icon-remove3'>Content icon-remove3</span> Eliminar del pack";
         element.style.background = "#CCC";

    }   
</script>

我可以更改以下标签的内容:

<label class="anadir_producto" for="additional_buy_{$packcontent.id_product}" onclick="changeText(this);" id="anadir"><span class="icon-4">Content Icon 4</span>Añadir al pack</label>

但是当我尝试切换回“Añadir al pack”时，问题就出现了，因为它不会切换回来。

JSFIDDLE

有什么线索吗？

Answer 1

你永远不会恢复原来的文本。像这样的事情可能是最简单的下一步:

function changeText(element){
  if (element.innerHTML.indexOf("icon-4") >= 0) {
    element.innerHTML = "<span class='icon-remove3'></span> Eliminar del pack";
  } else {
    element.innerHTML = "<span class='icon-4'>Content Icon 4</span>Añadir al pack";
  }
  element.style.background = "#CCC";
}

看看我们在设置新内容之前如何检查文本是什么？这样您就可以在值之间切换。

有很多更简洁的方法可以做到这一点，例如使用 DOM 而不是字符串比较来检查 span 的类。