Jquery如何显示隐藏div下面的span

Question

<div class="div"><span class="span"></span><a href="javascrip:void(0)" class="a"><img src="pp/pp.jpg" border="0"/></a></div>想做.div下面对应的span显示和隐藏$(document).ready(function(){ //这个就是传说的ready$(".div").mouseover(function(){ $(".span").addClass("spancs");}).mouseout(function(){$(".span").removeClass("spancs");})});鼠标进入就显示样式鼠标移出就取消样式样式里面是显示和隐藏。但我做的时候因为.div是循环输出的有好多。。所以它下面的span也有好多。所以得出来的结果是鼠标移近去的时候页面上所有的span都显示了。郁闷如果用$(".div").mouseover(function(){ $(this).addClass("overline");}).mouseout(function(){$(this).removeClass("overline");})这样的话就可以。但是我要的是div里面的span啊。拿不到对应的。

Answer 1

借助jquery的两个函数：find()和hide()可以实现这个效果

1	$("div").find("span").hide();

实例演示：点击三个div中的任一个，将隐藏被点击div下的span

1. 创建Html元素

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div class="box">     <span>点击div后隐藏相应的span：</span>     <div class="content">         <span>我是第一个div下的span</span>         <p>我是个p，所以不会被隐藏。</p>     </div>     <div class="content">         <span>我是第二个div下的span</span>         <p>我是个p，所以不会被隐藏。</p>     </div>     <div class="content">         <span>我是第三个div下的span</span>         <p>我是个p，所以不会被隐藏。</p>     </div>    </div>

1. 设置css样式

1 2 3

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;} div.box span{color:#999;font-style:italic;} div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

1. 编写jquery代码

1 2 3 4 5

$(function(){     $(".content").click(function() {         $(this).find("span").hide();     }); })

1. 观察效果

1. 初始样式

   

2. 点击第二个div的效果

   

Answer 2

$(".div").mouseover(function(){
$(this).find(".span").addClass("overline");}).mouseout(function(){
$(this).find(".span").removeClass("overline");
})