jquery - 简单的 jquery 代码。我不知道我做错了什么

Question

好的。首先让我说，我刚刚开始学习 jQuery，我已经接受了各种挑战，所以我可以学得更快。今天，我有一个非常新手的问题，如果答案很明显，我深表歉意。单击相应列表时，我使用 JQuery 显示特定值。

我不知道我做错了什么。基本上，我创建了一个无序列表，我想要实现的是，如果单击每个链接，更改应该特定于每个列表项的跨度值(因此每个列表项将具有不同的跨度值)。但是下面的脚本不起作用。关于我做错了什么或我应该做什么的任何想法？:-

<ul class="stag">
    <li><a class="$200" href="#d1">Display</a></li>
    <li><a class="$300" href="#d2">Shirt</a></li>
    <li><a class="$400" href="#d3">Dress</a></li>
    <li class="amount"></li>
    **<span>$200</span>**
</ul>

这是 jQuery 代码:-

 $(document).ready(function() {
      ("ul.stag li").click(function(){
        var activePd = $(this).find("a").attr("class");    //the clicked list
        $(".stag span").html(activePd.html());
            return false; 

       });
    });

有人可以帮忙吗？谢谢大家:)

Answer 1

类名必须以字符 a 到 Z 开头。您以美元符号开头，因此您的类名无效。您必须找到其他方式来存储 <a> 的值元素。这是我使用 data 的脚本的更好版本属性而不是 class存储您的值(value):

HTML:

<ul class="stag">
    <li><a data-cost= "$200" href="#d1">Display</a></li>
    <li><a data-cost ="$300" href="#d2">Shirt</a></li>
    <li><a data-cost ="$400" href="#d3">Dress</a></li>
    <li class="amount"></li>
    <li><span>$200</span></li>
</ul>​

Javascript:

$(document).ready(function() {
    $("ul.stag li").click(function() {
        var activePd = $(this).find("a").data("cost"); //the clicked list
        $(".stag li span").html(activePd);
        return false;
    });
});​

同样重要的是你不能调用 .html()在一个字符串上(这就是 activePd 是什么)，您甚至不需要这样做，因为它已经是您想要的值。

此外，就像 Rocket 在下面的评论中指出的那样，您不能拥有 <span>在<ul> .我把它放在 <li>现在并相应地更改了 jQuery 选择器。