将数字添加到 DOM 元素 jquery 的最有效/最快捷的方法

Question

我正在学习 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);
}

谢谢 ：-）

Answer 1

避免内联事件处理程序是第一件事。 设置事件处理程序后，您可以通过this方式引用元素：

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

Answer 2

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

有几种方法，我建议使用jQuery 的.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);
}

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

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