2

我已经为此苦苦挣扎了两天，显然是因为我对 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);
 });
});

谢谢！

4

3 回答 3

1

在 click() 回调中，$this将引用<span class="update">. 所以你可以选择它的祖父母作为基础来做到这一点：

$(document).ready(function(){
 $(".update").click(function(){
  var base = $(this).parent().parent(); //loop-item
  var nuVal = base.find(".count").text() + 1;
  base.find(".count").text(nuVal);
 });
});
于 2013-05-19T00:40:24.347 回答
1

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

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

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

其次，您的循环项目 div 在课程末尾缺少引号：

<div class="loop-item>

如果我理解正确，您希望完成此操作：单击具有“更新”类的链接元素时，仅更改同一循环项 div 中“计数”类的跨度元素的值。

以下是我们如何完成该任务：

$(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);
 });
});
于 2013-05-19T00:47:09.270 回答
0

尝试这个;

$(document).ready(function(){
   $(".update").click(function(){
      var parent = $(this).parent('span').parent('div');
      var countVal = $(".count", parent).text();
      var nuVal = countVal + 1;
      $(".count", parent).text(nuVal);
   });
});

您基本上需要抓住您单击的项目的父项并使用它来选择您需要的内联元素。

于 2013-05-19T00:39:57.197 回答