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

Question

我想用 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>

Answer 1

嗨 Mohammad，欢迎来到 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">

将问题分解成更小的部分，这样我们就不必重复太多了！

 const makeButton = (text = "", onclick = event => null) => { const b = document.createElement("button") b.onclick = onclick b.appendChild(document.createTextNode(text)) return b } const makeInput = (name = "", value = "") => { const i = document.createElement("input") i.name = name i.value = value return i } const counter = (name = "", value = 0) => { const elem = document.createElement("div") const input = makeInput(name, value) const update = f => event => (value = f(value), input.value = value) input.disabled = true elem.appendChild(makeButton("+", update(x => x + 1))) elem.appendChild(makeButton("-", update(x => x - 1))) 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">

Answer 2

您应该尽量避免 class 名称中的减号“-”。

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

关于您的第二个请求，“谢谢”回答听起来不错。