javascript - 提高 JavaScript 性能

标签 javascript jquery performance

我正在尝试改进以下代码(用于按钮计数器),但我不确定初始检查。

document.querySelectorAll("#minus")[0].addEventListener("click", function(e){
  e.stopPropagation();
  document.querySelectorAll("#number")[0].innerText = Number(document.querySelectorAll("#number")[0].innerText) - 1
})

document.querySelectorAll("#plus")[0].addEventListener("click", function(e) {
  e.stopPropagation();
  document.querySelectorAll("#number")[0].innerText = Number(document.querySelectorAll("#number")[0].innerText) + 1
})

如何使这段代码更高效?

我还希望添加一条计数器不能达到零的规则。

非常感谢您的帮助:)

最佳答案

您可以使用querySelector来缩短它,并添加如下条件:

var num = document.querySelector("#number")
, plus = document.querySelector("#plus")
, minus = document.querySelector("#minus")

minus.addEventListener("click", function(e){
  var value = Number(num.innerText)
  num.innerText = value === 1 ? 1 : value - 1
})

plus.addEventListener("click", function(e) { 
  num.innerText = Number(num.innerText) + 1
})
div{ text-align: center; cursor: pointer; width: 100px; outline: 1px solid blue; }
<div id="plus">+</div>
<div id="minus">-</div>
<div id="number">1</div>

关于javascript - 提高 JavaScript 性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60683701/

相关文章:

javascript - 在 HTML 窗口之间导航

javascript - 将鼠标悬停在 div 的嵌套项上

javascript - AngularJS从包含对象的数组中过滤

javascript - jQuery DatePicker 以今天为 maxDate

javascript - 如果 url 匹配 X,则执行某些操作,忽略字符串

performance - 使用内部同步实现作业列表

javascript - typescript 导入返回 "Cannot find module"

javascript - Uncaught ReferenceError : i2d is not defined at Drawing. js:1

mysql - 具有大量条目的可轻松过滤的数据库表

arrays - 优化 3D 阵列上的函数速度