Question

我想创建一个eshop购物篮..所以当我按下购买按钮时，我想要计算物品数量。我尝试使用getElementById并简单地在我的购物篮中调用id的名称。

-

<script type="text/javascript">
    var index = 0;
</script>

在顶部的某个地方-----

<div>items :<input type="text" id="tb" style="width: 20px; color:green; font-weight:bold; border:none; background: none; margin-left:20px;"/></div>

当我按下购买按钮-------

<input  name="button" type="submit" value="add to basket" onClick="index = index + 1;document.getElementById('tb').value = index;" />

所以这是有效的..但是知道我想复制篮子并在页面中有两次（在顶部和结尾）所以如果我试图再次调用相同的ID它只是不起作用（导致id的独特性。我想我应该使用classname istead但我不知道怎么做..

我不仅仅是希望寻求解决方案的新手。感谢

Answer 1

您可以复制document.getElementById('tb').value = index并使用第二个（唯一）ID。或者您迭代documnet.getElementsByName('elementsname')，但您的input必须具有name属性。

Answer 2

使用类而不是id：

<div>items :<input type="text" class="tb" style="width: 20px; color:green; font-weight:bold; border:none; background: none; margin-left:20px;"/></div>

然后迭代具有该类的项目：

function tb_increment() {
    index++;
    tbs = document.getElementsByClassName("tb");
    for (var i = 0; i < tbs.length; i++) {
        tbs[i].value = index;
    }
}

然后在点击处理程序中使用此功能：

<input  name="button" type="submit" value="add to basket" onClick="tb_increment();" />

Answer 3

试试这个示例代码模式：

$(".class").each(function(){ index++; });
$("#tb").val(index);

按类名重新计算项目

3 个答案: