根据点击jquery更新dom文本

时间:2012-02-06 13:33:10

标签: jquery-selectors jquery

我的简单HTML结构:

<html>
    <body>
<p id="5">
    My Text Qoted Here - 
    <span class="author">Author </span>
          <br>
          <span class="uptext">20</span>
          <img class="im" class="upimg" 
          src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />
          <img class="im" class="downimg"
          src="http://2.bp.blogspot.com/_XeuZ1yDnv4Q/TSUkAT6T1dI/AAAAAAAADR8/nPHP4JvVxy8/s1600/vote.jpg" />
          <span class="downtext">5</span>
          </p>
</body>
</html>       

可以看出有两个图像,我想根据点击的图像改变图像的计数。

我为它编写了以下jquery代码:

$(function() {
 $(".upimg").click(function(e) {
        e.preventDefault();
        alert("here1");
        curr_val = $(this).closest(".uptext").text();
        nos = parseInt(curr_val, 10) + 1;
        $(this).closest(".uptext").text(nos);
    });

    $(".downimg").click(function(e) {
        e.preventDefault();
        alert("here2");
        curr_val = $(this).closest(".downtext").text();
        nos = parseInt(curr_val, 10) + 1;
        $(this).closest(".downtext").text(nos);
    });

});

但它似乎没有回应。 您可以找到小提琴here

2 个答案:

答案 0 :(得分:4)

您的<img>标记有两个类属性:

<img class="im" class="upimg"

尝试将其更改为

<img class="im upimg"

此外,closest()方法返回最近的元素,而不是相邻的兄弟元素,因此要找到正确的uptext元素,您需要使用:

$(this).prev().text()

答案 1 :(得分:1)

你不能使用2类属性 你必须这样做

<img class="im upimg" 
          src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />