如何在javascript中实现多个项目的计数？

Posted 2021-04-11

我想用Js处理多个项目的计数。

1）我想要的是当点击加号或减号时，旁边的计数器数字会更新；2）考虑到通过点击添加房间，另一个房间被添加到列表中，它的标题应该改变，例如在这种情况下是（房间二）。

这是我的js代码

 $(".Room-Plus-Btn").click(function () {
        Room_item=$(".Room").html()
        $(".Room-Counter-Items").append(Room_item)
    })

这是我的html

<div class="Room-Counter-Hotel-pge py-3 pr-3 col-12">

<div class="Room-Indicator">

</div>
<div class="Room-Counter-Items">
    <!--Room Item-->
    <div class="Room">
        <div class="col-12 mt-1 mb-2">
            <div class="row">
                <div class="col-7">
                    <p class="Room-Number"> Room one</p>
                </div>
                <div class="col-5"></div>
                <div class="col-7 d-flex align-items-center">
                    <span class="Room-Age">
                        adult
                    </span>
                    <span class="Room-Age-Range">
                    (more than 12)
                </span>
                </div>
                <div class="col-4 Room-Counter-Btns">
                    <button class="Btn Room-Plus">
                        <i class="fa text-grey fa-plus-circle"></i>
                    </button>
                    <span class="Room-Count">0</span>
                    <button class="Btn Room-Minus">
                        <i class="fa text-grey fa-minus-circle"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="col-12 my-1">
            <div class="row">
                <div class="col-7 d-flex align-items-center">
                    <span class="Room-Age">
                        kid
                    </span>
                    <span class="Room-Age-Range">
                    (0 to 12)
                    </span>
                </div>
                <div class="col-4 Room-Counter-Btns">
                    <button class="Btn Room-Plus">
                        <i class="fa text-grey fa-plus-circle"></i>
                    </button>
                    <span class="Room-Count">0</span>
                    <button class="Btn Room-Minus">
                        <i class="fa  text-grey fa-minus-circle"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <hr class="my-3 w-75">
</div>
<div class="col-12 text-center">
    <button class="Room-Plus-Btn">add room</button>
</div>

答案

嗨，穆罕默德，欢迎来到StackOverflow! 我希望这个程序能告诉你一种方法，你可以解决你的问题。

const counter = (name = "", init = 0) =>
{ let value = init
  const update = f => event =>
    (value = f(value), input.value = value)
  const elem = document.createElement("div")
  const inc = document.createElement("button")
  const dec = document.createElement("button")
  const input = document.createElement("input")
  inc.appendChild(document.createTextNode("+"))
  inc.onclick = update(x => x + 1)
  dec.appendChild(document.createTextNode("-"))
  dec.onclick = update(x => x - 1)
  input.name = name
  input.disabled = true
  input.value = value
  elem.appendChild(inc)
  elem.appendChild(dec)
  elem.appendChild(input)
  return elem
}

document.body.appendChild(counter("a"))      // <input name="a" value="0">
document.body.appendChild(counter("b", 3))   // <input name="b" value="3">
document.body.appendChild(counter("c", 5))   // <input name="c" value="5">
  

另一答案

你应该尽量避免班级名称中的减号"-"。

$(".Room-Plus").click(function () {
     Room_Count= parseInt( $(".Room-Count").html() )+1;
    $(".Room-Count").html(Room_Count) ;
})

关于你的第二个要求，"谢谢 "的回答听起来不错。

以上是关于如何在javascript中实现多个项目的计数？的主要内容，如果未能解决你的问题，请参考以下文章

在 SQLite 数据库中实现诸如引用计数之类的东西

如何在Clojure中实现整数的计数排序？

如何通过 JavaScript 显示“PWA Web 应用程序图标”的计数？

利用argument对象在javaScript中实现重载（overload）

如何在 javascript/HTML5/NodeJS 中实现客户端-服务器-客户端基础架构的想法

Pycharm中实现多个项目共存的方式