单击时修改文本和 html 内容<label>(Smarty 语言)

在进行更改时，我发现了社区用户提供的某种解决方案，但它根本不起作用。

function changeText(productId){
var label = document.getElementById("additional_buy_" + productId);
var state = document.getElementById("anadir_" + productId);

    if (state.value === ""){
        state.value = "clicked";
        label.innerHTML = "Clicked";
    }
    else{
        state.value = "";
        label.innerHTML = "Click Me";
    }    
}

HTML

<input id="additional_buy_{$packcontent.id_product}" type="checkbox" class="additional_buy checkbox" name="additional_buy_" value="{$packcontent.id_product}" {if $packcontent.quantity <= 0 && !$packcontent.available_out_of_stock}disabled{/if}>
<label class="anadir_producto" for="additional_buy_{$packcontent.id_product}" onclick="changeText({$packcontent.id_product});" type="hidden"  id="anadir_{$packcontent.id_product}">Click me</label>

另一方面，我想改变标签内的span类，因为原来的标签是这样的:

<label class="anadir_producto" for="additional_buy_{$packcontent.id_product}" onclick="changeText({$packcontent.id_product});" type="hidden"  id="anadir_{$packcontent.id_product}"><span class="icon-cart"></span>Click me</label>

知道为什么不工作吗?我认为这个问题可能来自以下代码，因为函数getElementById只是试图使用错误的ID，但我不知道如何在JS代码上应用智能函数additional_buy_{$packcontent.id_product}，因为这个id是用于标签的。

 var label = document.getElementById("some_addproductlabel_" + productId);
 var state = document.getElementById("some_product_state_" + productId);

* * * * * * * *更新

经过一番努力，我发现了另一个(可能不是很好的)解决方案:

JS代码:

function changeText(element){
    element.innerHTML = "Clicked";   
}

HTML代码:

<input id="additional_buy_{$packcontent.id_product}" type="checkbox" class="additional_buy checkbox" name="additional_buy_" value="{$packcontent.id_product}" {if $packcontent.quantity <= 0 && !$packcontent.available_out_of_stock}disabled{/if}>
<label class="anadir_producto" for="additional_buy_{$packcontent.id_product}" onclick="changeText(this);" id="anadir"><span class="icon-ok"></span>Click me</label>

问题来了，当它没有切换回"点击我"。也有任何方法在element.innerHTML添加一个跨度?因为我想添加一个需要span元素的图标。

尝试添加如下内容:

 var item = document.getElementsByClassName("class");
 item.addEventListener("click", function() {
     var param = this.getAttribute("param");
 });

我通常不相信代码调用的标记，但这是我的观点。

function changeText(element){
    if(element.innerHTML === "Clicked") {
        element.innerHTML = "Click Me";
    } else {
        element.innerHTML = "Clicked"
    }   
}

我可以为你想出最好的解决方案，因为我真的不知道你想用标签做什么，但如果你想切换它们，这个工作。我的建议是，对于这样的项目，使用jQuery。这样操作DOM就容易多了

可以使用以下代码完成:

<input id="additional_buy_{$packcontent.id_product}" type="checkbox" class="additional_buy checkbox" name="additional_buy_" value="{$packcontent.id_product}" {if $packcontent.quantity <= 0 && !$packcontent.available_out_of_stock}disabled{/if}>
<label class="anadir_producto" for="additional_buy_{$packcontent.id_product}" onclick="changeText({$packcontent.id_product});" id="anadir"><span class="icon-ok" id="icon-ok_{$packcontent.id_product}"></span><span id="text_{$packcontent.id_product}">Click me</span></label>
<script type="text/javascript">
function changeText(id){
    var element = document.getElementById('text_'+id);
    var icon = document.getElementById('icon-ok_'+id);
    if (element.innerHTML == 'Click me') {
        element.innerHTML = "Clicked";
        icon.innerHTML = '<img src="icon.png" />';
    }
    else {
        element.innerHTML = "Click me";
        icon.innerHTML = '';
    }
}
</script>

如您所见，我引入了两个带有id的span，以便更容易地更改文本和设置图像。当然，当您使用此代码时，您需要将icon.png放在正确的路径中(在我的情况下，放在主项目文件夹中)以正确显示图像。当然你也可以把图片放在这里默认隐藏当点击时只改变它的样式显示block/inline而不是使用<img src

相关内容

最新更新

热门标签：