jquery 多个show hide 问题
第一条<inputname="f"type="radio"id="on"value="0"/>on<inputname="f"type="radio"id="off"va...
第一条
<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>
这个要实现多个显示隐藏 不知道怎么写，请高手帮我看下代码 展开
<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>
这个要实现多个显示隐藏 不知道怎么写，请高手帮我看下代码 展开
4个回答
展开全部
你应该把你的完成的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的布局去处理..
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你的这个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();
就你贴上来的HTML，你的功能最简单的实现是这样的：
$("input").click(function(){
$(this).next("div").hide();
$(this).next().next().show();
$(this).next().next().next("div").hide();
})
这段代码已经测试过了。不知是否是你要求的？
更新：加上这段就完美了
$(this).next().next().next("div").hide();
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$("#on").click(function(){
$("#id1").show();
$("#id2").show();
$("#id3").show();
$("#id4").hide();
});
类似上面这面。
$("#id1").show();
$("#id2").show();
$("#id3").show();
$("#id4").hide();
});
类似上面这面。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你现在存在什么问题？
追问
希望能够在 第一条 第二条 第三条 循环体中各自显示和隐藏各自的部分。
追答
上面那位朋友的不错
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
