我已经在这两天苦苦挣扎了,显然是因为我对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);
});
});
谢谢!
答案 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);
});
});
您基本上需要抓取您单击的项目的父项,并使用它来选择所需的内联元素。