我已经为此苦苦挣扎了两天,显然是因为我对 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);
});
});
谢谢!
最佳答案
这个很简单,我首先看到两个主要问题,你在这里所说的是:
$(".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);
});
});
关于JQuery:在(wordpress)循环内检索和更新单个跨度值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16630348/