Question

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

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

到目前为止我所看到的是：当我点击一个触发链接时 - 让我们说第一个循环项目，更新所有项目循环中所有跨度的值/内容。我想要实现的就是这样简单：当我单击第一个循环项上的触发器链接时，它仅更新该循环项上的span的值/内容。

这是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

在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);
 });
});

Answer 2

这个很容易，我首先看到的两个主要问题是：

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

正在更改班级计数的所有项目。

第二个你的循环项目div在课程结束时缺少一个引号：

<div class="loop-item>

如果我理解正确你想要完成这个：点击一个带有“update”类的链接元素，只更改同一个loop-item 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);
 });
});

Answer 3

试试这个;

$(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);
   });
});

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

JQuery：在（wordpress）循环中检索并更新SINGLE span值

3 个答案: