Geek asks and answers

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

Ok First let me say that I was just starting to learn jQuery, and I took on various issues so that I could learn faster. Today I have a very newbie, so I apologize if the answer to this is obvious. I use jQuery to display a specific value when I click on the corresponding list.

I do not know what I am doing wrong. Basically, I created an unordered list, and what I want to achieve is by clicking on each link, change the range value, which should be specific for each list item (so each list item will have a different range value). But the script below does not work. Any idea what I'm doing wrong or what should I 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 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:)

+3
10

a Z. , . <a>. script, data class :

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.

+5

activePd - , .html():

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

, :

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

-, jQuery $ jQuery.

Yours:

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

:

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

$ 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; 
         });
});
+1

.

  • <span> <ul>, <li> .
  • $, . data-*.
  • activePd - , jQuery, .html() .
  • $ ("ul.stag li").click

HTML :

<ul class="stag">
    <!-- The price is stored in a data attribute -->
    <!-- that 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>​

jQuery :

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

+1

: http://jsfiddle.net/jn7P7/5/

, $ ("ul.stag > li")

, , activePd , .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;

});​
0

$ html, , , class , data. <li><a data-price="$200" href="#d1">Display</a></li> $(this).data('price') jQuery.

0

jquery

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

       });
    });

, HTML

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

, id

rel ul li

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

   });
});

activePd.html()

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

activePd $ click, JQuery.

0

HTML JS: 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();
});

:

<span> UL, , .amount LI.

("ul.stag li") $.

activePd.html() activePd, (), JQuery Object.

, , , , .

, LI, - html clickable element a, .

Learn more about jquery and html tags ! Good luck.

0
source

More articles:


All Articles