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ñadiralpack”时，因为它没有切换回来。

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

Answer 2

如果您正在使用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属性。把事情分开通常会更好。

Answer 3

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

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;
     }
    }

Answer 4

使用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/

使用javascript切换html内容

4 个答案: