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

您好，穆罕默德，欢迎您使用StackOverflow！我希望该程序可以向您展示解决问题的一种方式

ForeignKey

将问题分解成较小的部分可以使我们不必重复太多！

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">

Answer 2

您应该尝试避免在班级名称中使用减号“-”。

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

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

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

2 个答案: