向 DOM 元素 jquery 添加数字的最有效/最快的方法答案

【问题标题】：Most efficient/quickest way to add a number to a DOM element jquery向 DOM 元素 jquery 添加数字的最有效/最快的方法
【发布时间】：2020-09-17 16:31:32
【问题描述】：

我正在学习 jQuery 的基础知识并测试我所知道的，我尝试将 1 添加到存储数字的 DOM 元素 (<span>) 的文本中。 <span> 中的数字成功增加了 1，但是我觉得我更新元素的方式并不是最好的方式，因为我似乎需要调用相同的 jQuery 函数两次（见下面的代码）。

有人能提出更好的做法吗？

HTML

<button onclick="foo('a')">
    <span id="a">0</span> liked this
</button>

JS(jQuery)

function foo(elementId){
    $('#' + elementId).text(parseInt($('#' + elementId).text()) + 1);
}

谢谢你:-)

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

首先要避免使用内联事件处理程序。设置事件处理程序后，您可以通过 this 引用该元素：

$('button').click(function() {
  $(this).find('span').text( parseInt($(this).find('span').text()) + 1 );
})

【讨论】：

谢谢。为什么要避免内联事件处理程序？
@koder613 很高兴你问我。见stackoverflow.com/questions/15792498/… 和stackoverflow.com/questions/5871640/…

【解决方案2】：

你这样做的方式还可以，但我会尽量避免将状态存储在文本节点中。

有几种方法，我建议jQuery's .data。

<button onclick="handleClick" data-count="0">
    <span id="a">0</span> liked this
</button>

function handleClick() {
  var $this = $(this);
  var count = $this.data('count');

  // update state
  $this.data('count', count + 1);
  // update view
  $this.find('#a').text(count + 1);
}

是的，您不必使用内联处理程序也是如此。

【讨论】：

我对 jQuery 很陌生，很抱歉我的无知，但是“在文本节点中存储状态”是什么意思？谢谢。
@koder613 嘿！我在<span>0</span> 中提到了这个0。以这种方式存储值会使读取和修改它们稍微困难一些。通常建议在你的 JS 代码中维护这个 state。
感谢您的解释。同样在您的代码中，$this = $(this) 行的目的是什么。是否只是为了缩短对 $(this) 两个字符的引用？
@koder613 完全正确 :) 如果您更喜欢 $(this)，请随意放弃它。我只是习惯于在函数的请求中存储对所有内容的引用。

【解决方案3】：

因为按钮内只有一个元素（即：span），所以我建议不使用 jQuery 的另一种方法。缺点：

内联事件处理程序
我假设只有一个孩子

function foo(ele){
    ele.children[0].textContent = parseInt(ele.textContent) + 1;
}

<button onclick="foo(this)">
    <span id="a">0</span> liked this
</button>

根据您的评论，代码是：

document.querySelector('button').addEventListener('click', function(e) {
  this.children[0].textContent = parseInt(this.textContent) + 1;
});

<button id='b'>
    <span id="a">0</span> liked this
</button>

【讨论】：

正如你提到的，我不想使用内联事件处理程序
感谢您的帮助。