JQuery:在(wordpress)循环中检索并更新SINGLE span值

时间:2013-05-19 00:32:59

标签: jquery wordpress dom

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

谢谢!

3 个答案:

答案 0 :(得分: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);
 });
});

答案 1 :(得分:1)

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

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

答案 2 :(得分: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);
   });
});

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