simple jquery code. I don't know what I'm doing wrong

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

Class names cannot begin with a dollar sign. This may not be *THE* problem, but it's still invalid. Consider using an HTML5 "data-" element instead. — Diodeus - James MacFarlane, May 10 '12 at 19:48

score 5 · Accepted Answer · edited May 10 '12 at 20:05

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.

Good point, I'll fix that. It was the first solution I thought of, I have some terrible habits. :( — Elliot Bonneville, May 10 '12 at 19:49
P.S. That `` is invalid HTML. It can't be in the `
` like that. — gen_Eric, May 10 '12 at 19:50

score 1 · Answer 2 · answered May 10 '12 at 19:45

activePd is a string, so you don't call .html() on it:

$(".stag span").html(activePd);

Also, you can make it a lot simpler:

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

score 1 · Answer 3 · edited May 10 '12 at 19:58

1

First things first, your missing the $ jquery on your first line on jQuery.

Yours:

$(document).ready(function() {
    ("ul.stag li").click(function(){

New:

$(document).ready(function() {
    $("ul.stag li").click(function(){

edited May 10 '12 at 19:58

gen_Eric

223,194
41
299
337

answered May 10 '12 at 19:46

Layton Everson

1,148
9
18

score 1 · Answer 4 · answered May 10 '12 at 19:48

You're missing a $ in your jQuery script:

$(document).ready(function() {
here --> $("ul.stag li").click(function(){
             var activePd = $(this).find("a").attr("class");
             $(".stag span").html(activePd.html());
             return false; 
         });
});

score 1 · Answer 5 · answered May 10 '12 at 19:54

1

There a number of issues here.

Having a <span> in a <ul>, but not in an <li> is invalid.
Class names cannot start with $, and are also not for storing data. Try using data-* attributes.
activePd is a string, not a jQuery object, so .html() isn't needed.
You forgot the $ before ("ul.stag li").click

Your HTML should look like this:

<ul class="stag">
    <!-- The price is stored in a data attribute -->
    <!-- that's an HTML5 feature, but all browsers support it -->
    <li><a data-price="$200" href="#d1">Display</a></li>
    <li><a data-price="$300" href="#d2">Shirt</a></li>
    <li><a data-price="$400" href="#d3">Dress</a></li>
    <!-- The only valid children of ULs are LIs -->
    <li class="amount"><span>$200</span></li>
</ul>

And your jQuery should look like:

$(document).ready(function () {
     $("ul.stag li").click(function () {
         // jQuery can read data- attribures using .data
         var activePd = $(this).find("a").data("price");
         // The span has been moved to a new spot
         $(".stag .amount span").html(activePd);
         return false;
     });
 });

DEMO: http://jsfiddle.net/cUb9e/

answered May 10 '12 at 19:54

gen_Eric

223,194
41
299
337

Your looks very interesting. The code makes a lot of sense when reading. What amazes me however is that it doesn't seem to work in dreamweaver though it works perfectly in jsfiddle. Any solution to that bro? – May 11 '12 at 11:34
@Santy: Never used Dreamweaver, so I don't know. – gen_Eric May 11 '12 at 13:23
but does it work when you try it in other code editors?? Others seem to be having the same problem to. Works only in jsfiddle. Again please check this other code for me www.jsfiddle.net/cUb9e/1 and let me know if there is a way of removing the 'active' from the price. thanks bro – May 11 '12 at 13:50
@Santy: Do you have jQuery loaded on your page? It works fine for me on other online code editors ([jsbin](http://jsbin.com/agakaq) and [Tinkerbin](http://tinkerbin.com/DtMwCzxi)). – gen_Eric May 11 '12 at 13:53
@Santy: You're adding the class `active` to the element, then you're getting its class, which is now `$200 active`. This is why I suggest *not* using classes to save the prices. – gen_Eric May 11 '12 at 13:58
wow! took me so long to figure out that. Sadly i tried saving it in the html5 data-* but doesn't seem to work. this is the updated version http://jsfiddle.net/cUb9e/2/ works perfect in the jsfiddle however when I input the script in my text editor and debug it, it doesn't work.:( are there other ways of storing the prices other than using 'data-*'? Or do you think I'm doing something wrong? and yep I have jquery loaded – May 11 '12 at 14:06
@Santy: What browser are you using? What jQuery version? What "text editor"? How are you debugging it? – gen_Eric May 11 '12 at 14:09
yaaay! this worked for me, http://jsfiddle.net/cUb9e/4/ .. I want to know is this a valid jquery syntax? Everything works perfectly :) again I want know the importance of the " var rel=$(this).attr("rel"); " since the code works without the "rel" included. – May 11 '12 at 14:20
@Santy: That looks fine to me. The `.data` syntax only works in jQuery 1.4.3+, that's why I asked what jQuery version you were using. – gen_Eric May 11 '12 at 14:20
@Santy: The `rel` was from another answer, not mine. That was so you could have multiple `stag-x` divs, and make sure the right one was selected. – gen_Eric May 11 '12 at 14:21
so is it wrong if I exclude it like in the code above. Cuz everything still seem to work fine. – May 11 '12 at 14:23

score 0 · Answer 6 · answered May 10 '12 at 19:49

Here is a working solution: http://jsfiddle.net/jn7P7/5/

What was missing is the $ before ("ul.stag > li")

and as mentioned activePd is a String, no need to do .html()

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

JS

$("ul.stag > li").click(function() {

    var activePd = $(this).find("a").attr("class"); //the clicked list
    console.log(activePd);
    $(".stag span").html(activePd);
    return false;

});

score 0 · Answer 7 · edited May 23 '17 at 12:28

0

$ is not a valid character in html class names, and since you seem to be using the class attribute more as a data container I would suggest you switch to the data attribute. That would be <li><a data-price="$200" href="#d1">Display</a></li> in your markup and $(this).data('price') in jQuery.

edited May 23 '17 at 12:28

Community

1
1

answered May 10 '12 at 19:51

Simon

3,667
1
35
49

Imdad · Answer 8 · 2012-05-10T20:06:33.457

0

check the jquery changes

$(document).ready(function() {
      $("ul.stag li a").click(function(){
        var activePd = $(this).attr("class"); 
        var rel=$(this).attr("rel"); 
        $("span[id='stag-"+rel+"']").html(activePd);
            return false; 

       });
    });

Notice the HTML is changed

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

You have to keep spans separate each associated with some specific id

The same id will be mentioned in the rel of corresponding ul li's anchor

edited May 10 '12 at 20:06

answered May 10 '12 at 19:53

Imdad

5,942
4
33
53

1

`$(".stag span[id='stag-"+rel+"']")` won't find anything because the span isn't a child of `.span`. – gen_Eric May 10 '12 at 19:59
I decided to get a little fancy. check this one too http://jsfiddle.net/cUb9e/1/ how do I remove the 'active' attached to the price upon click? – May 11 '12 at 12:11

score 0 · Answer 9 · answered May 10 '12 at 19:58

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

   });
});

remove the activePd.html() and just add

$(".stag span").html(activePd);

activePd and add a $ in the click event if using JQuery.

score 0 · Answer 10 · answered May 10 '12 at 20:02

Here is a working example with some fixed issues on your HTML and JS code: Fiddle

HTML

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

JS

$(".stag a").bind("click", function(e) {
  // the clicked list
  var activePd = $(this).attr("class");
  $(".amount").html(activePd);
  e.preventDefault();
});

What did you miss:

<span> cannot be a direct child of UL, but I believe you wanted it inside .amount LI.

("ul.stag li") is missing the $.

activePd.html() should be activePd, since it is a variable (string) and not a Jquery Object.

You probably want the user to click the a tag but prevent the link from being followed, so you need to pass the event and prevent its default behavior on your click function.

Lastly, you are assigning a click event to the LI, but the proper way is to assign it directly to the html clickable element a, thus saving some code lines and making your code more accurate.

Read more about Jquery and HTML tags! Good Luck.

@Rocket, return false prevents that event from propagating (or "bubbling up") the DOM! please [read this](http://css-tricks.com/return-false-and-prevent-default/) — Zuul, May 10 '12 at 20:05

simple jquery code. I don't know what I'm doing wrong

10 Answers10