JQuery:在(wordpress)循环内检索和更新单个跨度值

Question

我已经为此苦苦挣扎了两天，显然是因为我对 jQuery/Javascript 的了解很少，而且我想我已经彻底搜索了很多次，但没有得到我需要的答案。

我正在使用 Wordpress 循环，每个循环项都有:一个带有类的跨度，以及一个通过 jQuery 触发对该跨度的值/内容的更新的链接。

到目前为止，我所拥有的是:当我单击触发器链接时 - 假设在第一个循环项目上，所有项目循环上的所有跨度值/内容都会更新。我想要实现的目标很简单:当我单击第一个循环项目上的触发器链接时，它仅更新该循环项目上的跨度值/内容。

这是 HTML:

<div class="loop-item>
 <span class="count">123</span>
 <span><a class="update"></a></span>
 <p>some text</p>
</div>

<div class="loop-item>
 <span class="count">123</span>
 <span><a class="update"></a></span>
 <p>some text</p>
</div>

<div class="loop-item>
 <span class="count">123</span>
 <span><a class="update"></a></span>
 <p>some text</p>
</div>

<div class="loop-item>
 <span class="count">123</span>
 <span><a class="update"></a></span>
 <p>some text</p>
</div>

这是 jQuery:

$(document).ready(function(){
 $(".update").click(function(){
  var countVal = $(".count").text();
  var nuVal = countVal + 1;
  $(".count").text(nuVal);
 });
});

我知道这是一个完全错误的 jQuery 代码。我愿意学习，并希望这里有人愿意帮助我把事情做好。

谢谢。

更新:

工作的 jQuery 代码如下(修改了 nuVal 变量):

$(document).ready(function(){
 $(".update").click(function(){
  var countSpan = $(this).closest(".loop-item").find(".count");
  var countVal = countSpan.text();
  var nuVal = parseInt(countVal) + 1;
  countSpan.text(nuVal);
 });
});

谢谢!

Answer 1

这个很简单，我首先看到两个主要问题，你在这里所说的是:

$(".count").text(nuVal);

正在更改具有类计数的所有项目。

其次，你的循环项 div 在类末尾缺少引号:

<div class="loop-item>

如果我理解正确，您希望完成此任务:单击具有“update”类的链接元素时，仅更改同一循环项目 div 中类“count”的 span 元素的值。

以下是我们完成该任务的方法:

$(document).ready(function(){
 $(".update").click(function(){
  // get the container of class .loop-item and grab the span element of class count
  // and store that element in the countSpan variable
  var countSpan = $(this).closest(".loop-item").find(".count");

  var countVal = countSpan.text();
  var nuVal = countVal + 1;
  countSpan.text(nuVal);
 });
});