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>