[英]Jquery changing div text value upon clicking on li items
我正在为地图构建主题选择器,并希望反映当前选择的主题。
该代码似乎有效,但是从不返回“ li”项的值,对于我单击的任何“ li”项,它始终返回“ s-thumbs”。 我尝试使用.closest()方法,但无济于事。
我正在关注这篇文章。
<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>
$("ul.s-thumbs").on("click", "li", function() {
var myText = $(this).attr("class");
alert( myText );
$("#theme_title").text( myText );
});
使用.on()方法: http ://api.jquery.com/on/在事件之后添加特定元素(单击)
这是(今天)不推荐使用的.live()
方法的新替代。
$('ul.s-thumbs li').on('click', function(){
var getClass = $(this).attr('class');
$("#theme_title").text(getClass);
});
$("ul.s-thumbs").on("click", "a", function(event) {
var txt = $(this).closest("ul.s-thumbs li").attr("class");
$("#theme_title").text(txt);
});
注意 live()
已被弃用。
将事件处理程序添加到li而不是ul中。 我还使用了Jquery 1.7+中的首选方法
$("ul.s-thumbs li").on("click", function(event) {
$("#theme-title").html(
$(this).attr("class")
);
});
演示: http : //jsfiddle.net/euSye/1/
<script language="javascript">
$(document).ready(function() {
$(".s-thumbs").on("click", "a", function(e) {
$("#theme_title").text( $(e.target).parent("li").attr("class") );
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.