不熟悉jquery，麻烦高手帮助完善一个函数

下面代码是从网上找到的。
原代码的情况下，每当点击id=1、2、3、4的div时，在该div上都是显示“点击隐藏▲”或者“点击显示▼”,这样感觉不太好。
我想改成这样：
点击id=1的div时，在该div上显示----“div1隐藏▲”或者“div1显示▼”
点击id=2的div时，在该div上显示----“div2隐藏▲”或者“div2显示▼”
点击id=3的div时，在该div上显示----“div3隐藏▲”或者“div3显示▼”
点击id=4的div时，在该div上显示----“div4隐藏▲”或者“div4显示▼”
请高手帮助修改一下下面函数，谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- 资料来源：http://www.aifou.net/jQuery/show_hide/001.html    http://www.aifou.net/?p=233--><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击显示DIV，再点击隐藏DIV（第一步）</title><script src="jquery.min.js" type="text/javascript"></script><!-- 请问这段代码怎么修改能达到我的要求 -->
<script type="text/javascript">
$(function (){
    $(".a").click(function (){
     $zi=$(this).siblings(".b");
     if($zi.is(":hidden")){
    $(this).css("background","#c60000").text("点击隐藏▲");
$zi.show(1000);
 }else{
    $(this).css("background","#f3f3f3").text("点击显示▼");
    $zi.hide(1000);
 }
})
})
</script>
<style type="text/css">
.one{border:1px solid #c60000; width:937px;margin:6px}
.a{cursor:pointer; background:#f3f3f3; padding:1px}
.b{display:none; padding:1px; background:#F9f9f9;height:100px;}
</style></head>
<body>
<div class="one">
  <div class="a" id="1">点击显示▼</div>
  <div class="b" title="第一个">
  <img src="tuzi_20110210.jpg"/>
  </div>
</div><div class="one">
  <div class="a" id="2">点击显示▼</div>
  <div class="b" title="第二个">我是隐藏内容，正加载返回值</div>
</div><div class="one">
  <div class="a" id="3">点击显示▼</div>
  <div class="b" title="第三个">我是隐藏内容，正加载返回值</div>
</div><div class="one">
  <div class="a" id="4">点击显示▼</div>
  <div class="b" title="第四个">我是隐藏内容，正加载返回值</div>
</div></body>
</html>

解决方案 »

  1.   


    $(function (){
      $(".a").click(function (){
    $zi=$(this).siblings(".b");
    if($zi.is(":hidden")){
    $(this).css("background","#c60000").text("div"+$(this).attr("id")+"隐藏▲");
    $zi.show(1000);
    }else{
    $(this).css("background","#f3f3f3").text("div"+$(this).attr("id")+"显示▼");
    $zi.hide(1000);
    }
    })
    })就这样 ？
      

  2.   

    <script type="text/javascript">
    $(function (){
      $(".a").click(function (){
    $zi=$(this).siblings(".b");
    if($zi.is(":hidden")){
    $(this).css("background","#c60000").text("div" + this.id + "点击隐藏▲");
    $zi.show(1000);
    }else{
    $(this).css("background","#f3f3f3").text("div" + this.id + "点击显示▼");
    $zi.hide(1000);
    }
    })
    }) 
    </script>
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- 资料来源：http://www.aifou.net/jQuery/show_hide/001.html http://www.aifou.net/?p=233--><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>点击显示DIV，再点击隐藏DIV（第一步）</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
    type="text/javascript"></script><!-- 请问这段代码怎么修改能达到我的要求 -->
    <script type="text/javascript">
    $(function (){
      $(".a").click(function (){
    $zi=$(this).siblings(".b");
    if($zi.is(":hidden")){
    $(this).css("background","#c60000").text("div" + $(this).attr("id") + "隐藏▲");
    $zi.show(1000);
    }else{
    $(this).css("background","#f3f3f3").text("div" + $(this).attr("id") + "显示▼");
    $zi.hide(1000);
    }
    })
    }) 
    </script>
    <style type="text/css">
    .one{border:1px solid #c60000; width:937px;margin:6px}
    .a{cursor:pointer; background:#f3f3f3; padding:1px}
    .b{display:none; padding:1px; background:#F9f9f9;height:100px;}
    </style></head>
    <body>
    <div class="one">
      <div class="a" id="1">div1显示▼</div>
      <div class="b" title="第一个">
      <img src="tuzi_20110210.jpg"/> 
      </div>
    </div><div class="one">
      <div class="a" id="2">div2显示▼</div>
      <div class="b" title="第二个">我是隐藏内容，正加载返回值</div>
    </div><div class="one">
      <div class="a" id="3">div3显示▼</div>
      <div class="b" title="第三个">我是隐藏内容，正加载返回值</div>
    </div><div class="one">
      <div class="a" id="4">div4显示▼</div>
      <div class="b" title="第四个">我是隐藏内容，正加载返回值</div>
    </div></body>
    </html>
      

  4.   

    用slideUp/Down 效果好点；if($zi.is(":hidden")){
    $(this).css("background","#c60000").text("div"+this.id+"隐藏▲");
    $zi.slideDown(1000);
    }else{
    $(this).css("background","#f3f3f3").text("div"+this.id+"显示▼");
    $zi.slideUp(1000);
    }
      

  5.   

    1L 可以
    就是取出节点属性
    $("#id").attr("id")