使用jQuery获取相同类名的元素集合
如果看不到图片，我把代码写上。<head><scripttype="text/javascript"src="../jquery-1.4.4.min.js"></scri...
如果看不到图片，我把代码写上。
<head>
<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
<style type="text/css">
.spanTag { display:inline-block; margin-left:10px;}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="addTagDiv"></div>
<input type="text" id="textAdd" value="" /><input type="button" id="btnAdd" value="add" />
<script type="text/javascript">
var a=0;
$(document).ready(function(){
$("#btnAdd").click(function(){
a=$("#addTagDiv").html();
$("#addTagDiv").html(a+"<span class='spanTag'>"+$("#textAdd").val()+"</span>");
});
});
</script>
</body>
我是一个前端代码新手，这段代码的效果其实类似于腾讯网的手动添加标签。我现在已经用jQuery写出了添加功能，但删除标签的功能没有写出来。最大的问题是不知怎么获取鼠标当前移动到哪个标签上。例如：我已经通过text添加了4标签，鼠标现在悬停在第三个span标签上，如果我用$(".spanTag")话，则获取到的是span集合，而不是单独一个标签。我想请问高手们，我怎么（使用jQuery）能获取相应标签？ 展开
<head>
<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
<style type="text/css">
.spanTag { display:inline-block; margin-left:10px;}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="addTagDiv"></div>
<input type="text" id="textAdd" value="" /><input type="button" id="btnAdd" value="add" />
<script type="text/javascript">
var a=0;
$(document).ready(function(){
$("#btnAdd").click(function(){
a=$("#addTagDiv").html();
$("#addTagDiv").html(a+"<span class='spanTag'>"+$("#textAdd").val()+"</span>");
});
});
</script>
</body>
我是一个前端代码新手，这段代码的效果其实类似于腾讯网的手动添加标签。我现在已经用jQuery写出了添加功能，但删除标签的功能没有写出来。最大的问题是不知怎么获取鼠标当前移动到哪个标签上。例如：我已经通过text添加了4标签，鼠标现在悬停在第三个span标签上，如果我用$(".spanTag")话，则获取到的是span集合，而不是单独一个标签。我想请问高手们，我怎么（使用jQuery）能获取相应标签？ 展开
4个回答
展开全部
$("#btnAdd").click(function(){
$("<span/>").appendTo("#addTagDiv").html($("#textAdd").val()).addClass("spanTag").click(function(){
//这里面的this就是当前这个span的dom元素
//$(this)就是当前span的jquery对象，你可以对他们进行任何操作
//比如现在我就移除当前这个span
$(this).remove();
})
});
//最后整个代码的意思就是一个ID为btnAdd的元素单击时则追加一个span元素到ID为addTagDiv的元素内，该span的html为一个ID叫textAdd元素的value属性值。然后单击任何一个新增的span元素将会把这个span移除掉
//代码没有测试，如有问题请继续追问
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<body>
<div id="addTagDiv"></div>
<input type="text" id="textAdd" value="" /><input type="button" id="btnAdd" value="add" />
<script type="text/javascript">
var a;
var i=0;
$(document).ready(function(){
$("#btnAdd").click(function(){
i= i+1;
a=$("#addTagDiv").html();
$("#addTagDiv").html(a+"<span class='spanTag"+i+"' onmouseover='ov("+i+")'>"+$("#textAdd").val()+"</span>");
});
});
function ov(key){
var s=$(".spanTag"+key);
alert(s.text());
}
</script>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
提供一个思路，，在你添加完成后，为其中的每个span标签绑定事件，
$("#addTagDiv").html(a+"<span class='spanTag'>"+$("#textAdd").val()+"</span>");
//添加完成后重新绑定事件，我写的是click,悬停貌似是mouseover
$(".spanTag").click(function(){
alert($(this).text());//$(this)就是你当前的span了
});
如果有更好的思路，欢迎补充
$("#addTagDiv").html(a+"<span class='spanTag'>"+$("#textAdd").val()+"</span>");
//添加完成后重新绑定事件，我写的是click,悬停貌似是mouseover
$(".spanTag").click(function(){
alert($(this).text());//$(this)就是你当前的span了
});
如果有更好的思路，欢迎补充
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(document).ready(function(){
$("#btnAdd").click(function(){
var a=$("#addTagDiv").html();
$("#addTagDiv").html(a+"<span class='spanTag'>"+$("#textAdd").val()+"</span>");
bindListener();
});
});
function bindListener(){
$(".spanTag").unbind().click(function(){
$(this).remove();
})
}
$("#btnAdd").click(function(){
var a=$("#addTagDiv").html();
$("#addTagDiv").html(a+"<span class='spanTag'>"+$("#textAdd").val()+"</span>");
bindListener();
});
});
function bindListener(){
$(".spanTag").unbind().click(function(){
$(this).remove();
})
}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
