最新消息:文章中包含代码时,请遵守代码高亮规范!

多列表内容下勾选框对应内容显示隐藏【原创】

HTML+CSS Ann 469浏览 0评论

最近写公司的客户服务系统,遇到了一个页面,很多内容列表,然后勾选框,相对应的内容显示隐藏,以前也遇到过类似的,只是列表内容比较少,我都是通过给选框和列表分别添加不同类名,然后勾选指定那个类名显示隐藏,这样效果最后是达到了,但是消耗了大量的时间和精力,而且也是在列表较少的情况下,现在又遇到这中情况,列表很多,不能再采用添加类名方法了,否则真的会累个半死的··········但是如果不采用那种 办法又怎么处理呢??

先把效果图上传给大家看看!!!

2345截图20170106163742

刚开始问了旁边的大神阳哥,阳哥果然是阳哥,一出手就是不凡,他没直接给我讲如何写,只是给我提供了思路,用“data”标签,通过相同的data-id,先定义变量,然后遍历,当勾选的时候,让相对应的data-id内容列表显示隐藏,具体的代码如下:

勾选框静态代码:

<div class="line number1 index0 alt2"><span class="status-list"><i class="chat-check-icon sele-on" data-id="1"></i>支付宝支付</span>
<span class="status-list"><i class="chat-check-icon sele" data-id="2"></i>微信支付</span>
<span class="status-list"><i class="chat-check-icon sele-on" data-id="2"></i>微信登录</span>
<span class="status-list"><i class="chat-check-icon sele" data-id="2"></i>微信分享</span>
<span class="status-list"><i class="chat-check-icon sele-on" data-id="3"></i>iOS上架</span>
<span class="status-list"><i class="chat-check-icon sele" data-id="4"></i>QQ分享</span>
<span class="status-list"><i class="chat-check-icon sele-on" data-id="4"></i>QQ登录</span>
<span class="status-list"><i class="chat-check-icon sele-on" data-id="5"></i>短信</span>
<span class="status-list"><i class="chat-check-icon sele-on" data-id="6"></i>消息推送</span></div>
<div class="line number1 index0 alt2">

内容列表对应代码:


<!--支付宝支付-->
<div class="cont-wrap" data-id="1">
<p class="flatform-table">支付宝支付</p>
<p class="user-password">
<span class="mess-password-intro">支付宝账号</span>
<input class="mess-old-password " type="text" id="old"/>
<span class="pay-remark">(注:如果是企业,则需要支付宝企业账号)</span>
</p>
<p class="user-password">
<span class="mess-password-intro bank-title">支付宝<br>账号密码</span>
<input class="mess-old-password " type="password" id="new" />
</p>
</div>
<!--微信支付 微信登录 微信分享-->
<div class="cont-wrap" data-id="2">
<p class="flatform-table">微信支付 微信登录 微信分享</p>
<p class="user-password">
<span class="mess-password-intro bank-title">微信公众<br>平台账号</span>
<input class="mess-old-password " type="text" id="old"/>
<span class="mess-password-intro">密码</span>
<input class="mess-old-password person-phone" type="password" id="old"/>
</p>
<p class="pay-remark wechat-remark">(注:如果开发中包含微信微商城,则需要填写微信开放平台的账号及密码</p>
<p class="user-password">
<span class="mess-password-intro bank-title">微信开放<br>平台账号</span>
<input class="mess-old-password " type="text" id="old"/>
<span class="mess-password-intro">密码</span>
<input class="mess-old-password person-phone" type="password" id="old"/>
</p>
</div>
<!-------iOS上架------>
<div class="cont-wrap" data-id="3">
<p class="flatform-table">iOS上架</p>
<p class="user-password">
<span class="mess-password-intro bank-title">苹果开发者<br>账号</span>
<input class="mess-old-password " type="text" id="old"/>
<span class="mess-password-intro">密码</span>
<input class="mess-old-password person-phone" type="password" id="old"/>
</p>
<p class="user-password">
<span class="mess-password-intro bank-title">D-U-N-S<br>Number</span>
<input class="mess-old-password " type="text" id="old"/>
</p>
</div>
<!--QQ分享 QQ登录-->
<div class="cont-wrap" data-id="4">
<p class="flatform-table">QQ分享 QQ登录</p>
<p class="user-password">
<span class="mess-password-intro bank-title">腾讯开放<br>平台账号</span>
<input class="mess-old-password " type="text" id="old"/>
<span class="mess-password-intro">密码</span>
<input class="mess-old-password person-phone" type="password" id="old"/>
</p>
<p class="pay-remark wechat-remark">(注:如果是网页版第三方登录,则需要填写腾讯互联平台的账号及密码)</p>
<p class="user-password">
<span class="mess-password-intro bank-title">腾讯互联<br>平台账号</span>
<input class="mess-old-password " type="text" id="old"/>
<span class="mess-password-intro">密码</span>
<input class="mess-old-password person-phone" type="password" id="old"/>
</p>
</div>
<!--短信-->
<div class="cont-wrap" data-id="5">
<p class="flatform-table">短信</p>
<p class="user-password">
<span class="mess-password-intro">短信平台地址</span>
<input class="mess-old-password " type="text" id="old"/>
</p>
<p class="user-password">
<span class="mess-password-intro">账号</span>
<input class="mess-old-password " type="text" id="old"/>
<span class="mess-password-intro">密码</span>
<input class="mess-old-password person-phone" type="password" id="old"/>
</p>
</div>
<!--消息推送-->
<div class="cont-wrap" data-id="6">
<p class="flatform-table">消息推送</p>
<p class="user-password">
<span class="mess-password-intro bank-title">消息推送<br>平台地址</span>
<input class="mess-old-password " type="text" id="old"/>
</p>
<p class="user-password">
<span class="mess-password-intro">账号</span>
<input class="mess-old-password " type="text" id="old"/>
<span class="mess-password-intro">密码</span>
<input class="mess-old-password person-phone" type="password" id="old"/>
</p>
</div>

js编写代码:


// 勾选对应内容模块显示隐藏
var $wrapData = '';
$(".chat-check-icon").click(function(){
var $Data = $(this).data("id");
if($(this).hasClass("sele-on")){
$(".cont-wrap").each(function(){
var $this_data = $(this);
$wrapData = $this_data.data("id");
if($Data == $wrapData){
$this_data.show();
}
})
}else if($(this).hasClass("sele")){
$(".cont-wrap").each(function(){
var $this_data = $(this);
$wrapData = $this_data.data("id");
if($Data == $wrapData){
$this_data.hide();
}
})
}
})

写好后我一试,果然有效,厉害厉害,正高兴着呢,突然,不妙,此方法在i8里不买账啊,这是个很大的bug,原来“data”是h5标签的原因,没办法,只能作废,后来查了网络寻找可以让i8兼容“data”的办法,最后都无疾而终,后来仔细搜索,想到了之前很多地方input都会用到的“name”标签,灵机一动,急着去试试行不行,嗨!!梅西纳感动还真行啊,高兴坏了我,现在就把代码拿来和大家分享,哈哈哈哈哈···········

勾选框静态代码:

<span class="status-list"><i class="chat-check-icon sele-on" name="1"></i>支付宝支付</span>
 <span class="status-list"><i class="chat-check-icon sele" name="2"></i>微信支付</span>
 <span class="status-list"><i class="chat-check-icon sele-on" name="2"></i>微信登录</span>
 <span class="status-list"><i class="chat-check-icon sele" name="2"></i>微信分享</span>
 <span class="status-list"><i class="chat-check-icon sele-on" name="3"></i>iOS上架</span>
 <span class="status-list"><i class="chat-check-icon sele" name="4"></i>QQ分享</span>
 <span class="status-list"><i class="chat-check-icon sele-on" name="4"></i>QQ登录</span>
 <span class="status-list"><i class="chat-check-icon sele-on"name="5"></i>短信</span>
 <span class="status-list"><i class="chat-check-icon sele-on" name="6"></i>消息推送</span>

内容列表对应代码

<!--支付宝支付-->
 <div class="cont-wrap" name="1">
 <p class="flatform-table">支付宝支付</p>
 <p class="user-password">
 <span class="mess-password-intro">支付宝账号</span>
 <input class="mess-old-password " type="text" id="old"/>
 <span class="pay-remark">(注:如果是企业,则需要支付宝企业账号)</span>
 </p>
 <p class="user-password">
 <span class="mess-password-intro bank-title">支付宝<br>账号密码</span>
 <input class="mess-old-password " type="password" id="new" />
 </p>
 </div>
 <!--微信支付 微信登录 微信分享-->
 <div class="cont-wrap" name="2">
 <p class="flatform-table">微信支付 微信登录 微信分享</p>
 <p class="user-password">
 <span class="mess-password-intro bank-title">微信公众<br>平台账号</span>
 <input class="mess-old-password " type="text" id="old"/>
 <span class="mess-password-intro">密码</span>
 <input class="mess-old-password person-phone" type="password" id="old"/>
 </p>
 <p class="pay-remark wechat-remark">(注:如果开发中包含微信微商城,则需要填写微信开放平台的账号及密码</p>
 <p class="user-password">
 <span class="mess-password-intro bank-title">微信开放<br>平台账号</span>
 <input class="mess-old-password " type="text" id="old"/>
 <span class="mess-password-intro">密码</span>
 <input class="mess-old-password person-phone" type="password" id="old"/>
 </p>
 </div> 
 <!-------iOS上架------>
 <div class="cont-wrap" name="3"> 
 <p class="flatform-table">iOS上架</p>
 <p class="user-password">
 <span class="mess-password-intro bank-title">苹果开发者<br>账号</span>
 <input class="mess-old-password " type="text" id="old"/>
 <span class="mess-password-intro">密码</span>
 <input class="mess-old-password person-phone" type="password" id="old"/>
 </p>
 <p class="user-password">
 <span class="mess-password-intro bank-title">D-U-N-S<br>Number</span>
 <input class="mess-old-password " type="text" id="old"/>
 </p>
 </div>
 <!--QQ分享 QQ登录-->
 <div class="cont-wrap" name="4"> 
 <p class="flatform-table">QQ分享 QQ登录</p>
 <p class="user-password">
 <span class="mess-password-intro bank-title">腾讯开放<br>平台账号</span>
 <input class="mess-old-password " type="text" id="old"/>
 <span class="mess-password-intro">密码</span>
 <input class="mess-old-password person-phone" type="password" id="old"/>
 </p>
 <p class="pay-remark wechat-remark">(注:如果是网页版第三方登录,则需要填写腾讯互联平台的账号及密码)</p>
 <p class="user-password">
 <span class="mess-password-intro bank-title">腾讯互联<br>平台账号</span>
 <input class="mess-old-password " type="text" id="old"/>
 <span class="mess-password-intro">密码</span>
 <input class="mess-old-password person-phone" type="password" id="old"/>
 </p>
 </div>
 <!--短信-->
 <div class="cont-wrap" name="5"> 
 <p class="flatform-table">短信</p>
 <p class="user-password">
 <span class="mess-password-intro">短信平台地址</span>
 <input class="mess-old-password " type="text" id="old"/>
 </p>
 <p class="user-password">
 <span class="mess-password-intro">账号</span>
 <input class="mess-old-password " type="text" id="old"/>
 <span class="mess-password-intro">密码</span>
 <input class="mess-old-password person-phone" type="password" id="old"/>
 </p>
 </div>
 <!--消息推送-->
 <div class="cont-wrap" name="6"> 
 <p class="flatform-table">消息推送</p>
 <p class="user-password">
 <span class="mess-password-intro bank-title">消息推送<br>平台地址</span>
 <input class="mess-old-password " type="text" id="old"/>
 </p>
 <p class="user-password">
 <span class="mess-password-intro">账号</span>
 <input class="mess-old-password " type="text" id="old"/>
 <span class="mess-password-intro">密码</span>
 <input class="mess-old-password person-phone" type="password" id="old"/>
 </p>
 </div>

js编写代码:


// 勾选对应内容模块显示隐藏
var $wrapData = '';
$(".chat-check-icon").click(function(){
var $Data = $(this).attr("name");
if($(this).hasClass("sele-on")){
$(".cont-wrap").each(function(){
var $this_data = $(this);
$wrapData = $this_data.attr("name");
if($Data == $wrapData){
$this_data.show();
}
})
}else if($(this).hasClass("sele")){
$(".cont-wrap").each(function(){
var $this_data = $(this);
$wrapData = $this_data.attr("name");
if($Data == $wrapData){
$this_data.hide();
}
})
}
})

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/19322.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者ann的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!