Question

Ok. First let me say that I just started learning jQuery and I’ve taken various challenges upon myself so I can learn faster. Today, I have a very novice question, so apologies if the answer to this is obvious.
I am using JQuery to display a particular value when it’s corresponding list is clicked.

I don’t know what I’m doing wrong. Basically, I’ve created an unorded list and what I want to achieve is, if each link is clicked, change the value of the span which should be specific for each list item (so each list item will have different span value). But the script below is not working. Any idea on what I’m doing wrong or what I should do?:-

<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>

this is the jQuery code:-

 $(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; 

       });
    });

Can anyone help?. Thanks guys 🙂

Answer 1

A class name must begin with a character from a to Z. You’re starting with a dollar sign, so your class name is invalid. You’ll have to find some other way of storing the value of the <a> element. Here’s a better version of your script where I use the data attribute instead of the class to store your 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;
    });
});​

Also important is that you can’t call .html() on a string (which is what activePd is), and you don’t even need to because it’s already the value you want.

Also, like Rocket pointed out in the comments below, you can’t have a <span> in a <ul>. I put it in an <li> for now and changed the jQuery selector accordingly.