用javascript切换html内容

Toggle html content with javascript

本文关键字：内容 html 切换 javascript      更新时间：2023-09-26

使用以下代码(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

什么线索吗?

您永远不会设置原始文本。下面的代码可能是最简单的下一步:

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的类。

使用jquery库

试

(function (_o) {
  $("label.anadir_producto").on("click", function (e) {
    $(this).html(function (i, o) {
       return ( o === _o 
              ? "<span class='icon-remove3'>"
                + "Content icon-remove3"
                + "</span>Eliminar del pack"
              : _o );
    });
    return ( $("span", this).is(".icon-remove3") 
           ? $(this).css("background", "#ccc") 
           : $(this).css("background", "transparent") );
    })
}($("label.anadir_producto").html()));
http://jsfiddle.net/guest271314/5U27a/

Else部分需要处理以切换到原始内容

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

如果您正在使用jQuery，请使用jQuery。: -)

http://jsfiddle.net/isherwood/U8yY8/5/

$('.anadir_producto').toggle(function() {
    $(this).html('<span class="icon-remove3">Content icon-remove3</span> Eliminar del pack');
}, function() {
    $(this).html('<span class="icon-4">Content Icon 4</span>Añadir al pack');
});

注意，我已经从HTML中删除了onclick属性。通常把事情分开比较好。

相关文章：