Question

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

JS

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代码上应用smarty函数additional_buy_{$packcontent.id_product}，因为{{1} }是用于标签的那个。

id

**** **** UPDATE

在解决之后，我发现了另一个（可能不是那么好）的解决方案：

JS代码：

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

HTML代码：

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

问题来自于它没有切换回＆＃34;点击我＆＃34;。还有什么方法可以在<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>中添加跨度？因为我想添加一个需要span元素的图标。

Answer 1

尝试添加以下内容：

 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要容易得多。

Answer 2

可以使用以下代码完成：

<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的2个跨度，以便更改文本和设置图像。当然，当您使用此代码时，您需要将icon.png放在正确的路径中（在我的情况下放入主项目文件夹中）以正确显示图像。您当然也可以将图片放在此处并默认隐藏它，当点击时只更改它的样式会显示block/inline而不是使用<img src

加载图片

修改文字和单击<label>（Smarty语言）</label>上的html内容

2 个答案: