Question

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

<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()可以实现这个效果

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

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

1. 创建Html元素

   <div class="box">
   	<span>点击div后隐藏相应的span：</span><br>
   	<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>

2. 设置css样式

   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;}

3. 编写jquery代码

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

4. 观察效果

• 初始样式

  

• 点击第二个div的效果

  

Answer 2

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