jquery 多个show hide 问题

第一条
<input name="f" type="radio" id="on" value="0" /> on
<input name="f" type="radio" id="off" value="1" />off
<div id="on_str" style="display:none">on</div>
<div id="off_str" style="display:none">off</div>

第二条
<input name="f" type="radio" id="on" value="0" /> on
<input name="f" type="radio" id="off" value="1" />off
<div id="on_str" style="display:none">on</div>
<div id="off_str" style="display:none">off</div>

第三条
<input name="f" type="radio" id="on" value="0" /> on
<input name="f" type="radio" id="off" value="1" />off
<div id="on_str" style="display:none">on</div>
<div id="off_str" style="display:none">off</div>

...

<script>

$("#on").click(function(){
$("#on_str").show();

$("#off_str").hide();
})

$("#off").click(function(){

$("#on_str").hide();

$("#off_str").show();
})

</script>

这个要实现多个显示隐藏不知道怎么写，请高手帮我看下代码

举报该问题

推荐答案 2013-07-12

你应该把你的完成的HTML代码都放上来，不然都不知道你HTML代码里是怎么布局的，用JQuery处理起来也很难符合实际情况。

下面我按照我所认为的，能比较方便处理你当前这个需求的方式，来写一个处理逻辑：

首先你HTML代码,第一条,第二条等等，HTML标签其实都是一样的，唯一可能不同的是下面DIV里显示的内容什么的。其实如果用ASP.NET处理的话,可能直接一个repeater就可以把所有的内容一下在绑定出来了！所以这边处理的时候,我给每条内容外层都加上一个div,给他一个特定的css样式,假设叫做"c-item"(这个随意取名好了,反正只是为了用jQuery的时候方便，没有具体样式）。然后把所有这些内容都放到一个总的container里。

这样把HTML布局处理好了以后，再用Jqeury处理的话就简单多了,代码如下：

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script language="javascript">
      $(document).ready(function(){
        $("#container > .c-item > :radio").click(function(){
          var id = this.id;
          var div_on = $(this).siblings("#on_str");
          var div_off = $(this).siblings("#off_str");
          if(id == "on"){
             div_on.show();
             div_off.hide();
          }else{
             div_on.hide();
             div_off.show();
          }
        });
      });
    </script>
  </head>
  <body >
  <div id="container">
    <div class="c-item">
      <input name="f" type="radio" id="on" value="0" /> on
      <input name="f" type="radio" id="off" value="1" />off
      <div id="on_str" style="display:none">on</div>
      <div id="off_str" style="display:none">off</div>
    </div>
    <div class="c-item">
      <input name="f" type="radio" id="on" value="0" /> on
      <input name="f" type="radio" id="off" value="1" />off
      <div id="on_str" style="display:none">on</div>
      <div id="off_str" style="display:none">off</div>
    </div>
    <div class="c-item">
      <input name="f" type="radio" id="on" value="0" /> on
      <input name="f" type="radio" id="off" value="1" />off
      <div id="on_str" style="display:none">on</div>
      <div id="off_str" style="display:none">off</div>
    </div>
  </div>
  </body>
</html>

你可以把你自己的HTML代码贴上来，我才能按照你的HTML的布局去处理..

温馨提示：答案为网友推荐，仅供参考

当前网址：http://88.wendadaohang.com/zd/V1BVKVaMB.html

其他回答

第1个回答 2013-07-12

你的这个HTML布局很奇特，按你的代码推算，你应该有3对on/off按钮，每对嵌套一下就好了。
就你贴上来的HTML，你的功能最简单的实现是这样的：
$("input").click(function(){
$(this).next("div").hide();
$(this).next().next().show();
$(this).next().next().next("div").hide();
})
这段代码已经测试过了。不知是否是你要求的？

更新：加上这段就完美了
$(this).next().next().next("div").hide();

第2个回答 2013-07-12

$("#on").click(function(){
$("#id1").show();
$("#id2").show();
$("#id3").show();
$("#id4").hide();
});
类似上面这面。

第3个回答 2013-07-12

你现在存在什么问题？追问

希望能够在第一条第二条第三条循环体中各自显示和隐藏各自的部分。

追答

上面那位朋友的不错

相似回答

jquery的hide和show方法疑问答：show,hide 都有 callback 函数，callback 就是在一个动作完成之后【再】执行的函数 ("#divb").hide(500,function(){ ("#diva").hide();});

Jquery的show()和hide()的问题目前是鼠标移入li则显示DIV,移除则隐藏...答：jq有自带的显示隐藏函数，不用自定义，可以使用fadeToggle()函数实现淡入淡出效果。如：("#one").hover(function(){ $("#item").fadeToggle();});使用Jq函数，前提是要引入jquery库，即jquery.js

用jquery怎么实现点击显示,再一次点击隐藏答：1、Jquery使用内置的show和hide方法就可以实现，具体的操作步骤首先需要打开hbuilder编辑器，新建一个a标签和一段隐藏的div，设置好它们的id属性，并设置一些简单的样式：2、然后引入Jquery的库文件，编写代码。首先获取a标签的dom并给它加一个click事件，在click的回调中判断div是否为隐藏状态，是的话就隐...

JQ怎么实现点击一个按钮一张图片显示其他几张隐藏答： showAndHide div1,#div2,#div3,#div4{ width: 100px;height: 100px;margin: 10px;} div1{ background-color: red;} div2{ background-color: blue;display: none;} div3{ background-color: gray;display: none;} div4{ background-color: green;display: none;} (functio...

JQUERY多个DIV鼠标移入移出显示隐藏对应DIV答：使用mouseenter是防止冒泡(this).find('span').show();//这里的show可以改成animate，toggle都可以});//鼠标移出$('.list').mouseleave(function(){//这里使用mouseover也可以，使用mouseenter是防止冒泡$(this).find('span').hide();//这里的hide可以改成animate，toggle都可以});});...

页面快操作时候,jquery的hide和show会出现bug,怎么解决答：使用stop，或者慢一点儿点

如何通过jquery隐藏和显示元素答：1.JQ中显隐有以下几种方式 show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作2.show()方法显示出隐藏的元素。 $(".btn2").click(function(){ $("p").show(); });3.toggle()方法 toggle() 方法切换元素的可见状态。如果被选元素可见，则...

jquery的hide()方法的动画效果问题?答：jquery的hide()方法的定义和用法：如果被选的元素已被显示，则隐藏该元素。实例：隐藏可见的元素：(".btn1").click(function(){ $("p").hide();});语法：(selector).hide(speed,callback)

大家正在搜

jquery disabled jquery hidden jquery addclass jquery remove jquery的hide方法 showhidemenu怎么办 jquery隐藏显示div show high html hidden