Question

jquery怎样获取当前我点击了的对象？

例如：

<div id="tree">
<li>教程
<ul><li>JAVA</li><li>C#</li></ul>

</li>
<li>视频
<ul><li>C++</li><li>GO</li></ul>
</li>
</div>

我想点击“JAVA”后改变“JAVA”的颜色，要怎么做？

Answer 1

$(function() {
    // 点击任意 li,全部 li 变色
    $("#tree li").click(function(e) {
        $(this).css("color", "red");
    });
});

$(function() {
    // 点击第二层 li， 第二层 li 变色
    $("#tree li li").click(function(e) {
        $(this).css("color", "red");
    });
});

$(function() {
    // 点击 JAVA 变色
    $("#tree li li:first").click(function(e) {
        $(this).css("color", "red");
    });
});

追问

谢谢你，我主要是想点击哪个哪个就变色，其他的不变，需要怎么做？

追答

第二个例子就是

点击 JAVA，JAVA 变色，点击 GO，GO 变色、、、

追问

这个好像不行，我做了后点击JAVA,JAVA和C#都变色了！

追答

上面三个例子你一次只能用一个，不然会覆盖的。你测试的时候页面只留下面的代码。

$(function() {
$("#tree li li").click(function() {
$(this).css("color", "red");
});
});

教程
JAVAC#

视频
C++GO

Answer 2

$('选择器').bind('事件类型',function(){
    var obj = $(this);// 这个就是事件发生的那个对象
    $('#tree li').css('color','#000');// 还原其它li的颜色
    obj.css('color','#f00');// 修改事件发生对象的颜色
})

追问

我现在是这样搞的
$('#tree').find('li')获取到所有的li后按照你的试了一下，每次点击JAVA或者是C#变色的是教程，
我alert($(this).html())；会弹出2次，一次显示JAVA再一次显示‘教程’，这是为什么？

另外请教你们回答的代码风格的是怎么弄的？

追答

不好意思，没仔细看你的代码，没注意到你的教程等是在li中的，所以你应该这样写

$('#tree li ul li').css('color','red');// 找到li下的ul下的li，这个是不包含教程、视频项的
// 至于你说的弹出两次，我不知道，如果弹了两次，只能说明这个alert执行了两次
// 你可以调试一下，看看为什么
// 关于代码格式，在你提问或回答的时候，看一样那个编辑框的上面的工具栏，有一个代码选项

Answer 3

 

$(document).ready(function(){  //DOM加载完成后执行
     //为tree中的第一个li绑定onclick事件
    $(“#tree li:eq(0)”).click(function(){ 
        $(this).css("color","red"); //设置字体颜色为红色
    });
});

Answer 4

最好 是在标签中 写一个类 class

$(document).ready(function(){
$(“.类名”).click(function(){
<!--事件-->
});
});