Jquery在點擊li項目時更改div文本值

Question

我正在構建地圖的主題選擇器，並且想要反映當前選定的主題。

該代碼似乎工作，但從不返回「li」項目的值，它總是返回「s-thumbs」，無論我點擊的任何「li」項目如何。我嘗試使用.closest（）方法，但無濟於事。

我下面this article.

<script language="javascript"> 
    $("ul.s-thumbs").live("click", function(event) { 
     $("#theme_title").text(
      $(this).closest("ul.s-thumbs li").attr("class") 
     ); 
    }); 
    </script> 


    <div id="theme">You have selected the <div id="theme_title"></div> Theme</div> 
     <div class="container_16" id="themebg"> 
     <!--<div class="grid_1"> <a href="" "img" src="/styles/image/leftarrow.png" id="leftarrow" alt=""/></div>--> 
     <div class="grid_16 slider-wrapper"> 
     <ul class="s-thumbs"> 
        <li class="Default"> <a href="javascript:setRoadmap()"><img src="/styles/image/thumbs/default.png" alt="" /></a>Default</li> 
        <li class="Hatchery"> <a href="javascript:setGreen()"><img src="/styles/image/thumbs/hatchery.png" alt="" /></a>Hatchery</li> 
</ul> 
</div> 

Answer 1

$('ul.s-thumbs li').on('click', function(){ 
    var getClass = $(this).attr('class'); 
    $("#theme_title").text(getClass); 
}); 

演示鏈接：http://jsfiddle.net/ChaseWest/w2tCE/4/

Answer 2

$("ul.s-thumbs").on("click", "li", function() { 
    var myText = $(this).attr("class"); 
    alert(myText);   
    $("#theme_title").text(myText); 
}); 

Demo jsFiddle

使用。對（）梅託德：http://api.jquery.com/on/的事件後添加特定元素（點擊）

這是（今天）已棄用.live()方法的新替代品。

Answer 3

$("ul.s-thumbs").on("click", "a", function(event) { 
    var txt = $(this).closest("ul.s-thumbs li").attr("class"); 
    $("#theme_title").text(txt); 
}); 

注意live()已被棄用。

Answer 4

添加事件處理程序裏，而不是上行。我也用的是jQuery中的首選方法1.7+

$("ul.s-thumbs li").on("click", function(event) { 
    $("#theme-title").html(  
     $(this).attr("class") 
    ); 
}); 

演示：http://jsfiddle.net/euSye/1/

Answer 5

<script language="javascript"> 
    $(document).ready(function() { 
     $(".s-thumbs").on("click", "a", function(e) { 
      $("#theme_title").text($(e.target).parent("li").attr("class")); 
     }); 
    }); 
</script>