jq实现多开关效果互不影响

素颜马尾好姑娘i 2021-09-17 23:22 325阅读 0赞

有时候我们会用jq写一些特效，jq在控制DOM方面是非常方便的，虽然jq在最近几年没什么进展。

下面就是一个实例图：![实例][20190127151040323.jpg]

我们可以用jq这样实现：

//html
     <div id="dd0" alt="0" onclick="changeok('0')">
               <img src="images/j.png" alt="" class="j1" />
               <img src="images/d.png" alt="" class="true1" />
     </div>
     //js
        function changeok(a){
        var yuans=$('#dd'+a);
        var isok=yuans.attr('alt');
            if(isok==0){
              yuans.attr('alt','1').children(".j1").hide();
              yuans.children(".true1").show()
            }else{
              yuans.attr('alt','0').children(".true1").hide();
              yuans.children(".j1").show();
            }
        }

这里是利用了给每个元素加一个id，这样他们就是独立的一个个体。然后就是利用默认属性alt等于零。让它默认显示没被选中。

![在这里插入图片描述][20190127152808176.png]  
如果写一个如上的自定义radio按钮怎么办？

也可以用这样的方法：

<ul class="user ovf">
                <li>
                    <img src="images/m.png" alt="">
                    <div id="dd0" alt="0" onclick="changeok('0')" class="slii">
                        <img src="images/k.png" alt="" class="k">
                        <img src="images/t.png" alt="" class="t">
                        <p>男宝宝</p>
                    </div>
                </li>
                <li>
                    <img src="images/g.png" alt="">
                    <div id="dd1" alt="0" onclick="changeok('1')" class="slii">
                        <img src="images/k.png" alt="" class="k">
                        <img src="images/t.png" alt="" class="t">
                        <p>女宝宝</p>
                    </div>
                </li>
            </ul>

function changeok(a){
        var yuans=$('#dd'+a);
        var isok=yuans.attr('alt');
        yuans.parent().siblings().children(".slii").attr('alt','0');
        if(isok==0){
        yuans.attr('alt','1').children(".k").hide();
        yuans.parent().siblings().children(".slii").children(".t").hide();
        yuans.parent().siblings().children(".slii").children(".k").show();
        yuans.children(".t").show()
        }else{
        yuans.attr('alt','0').children(".t").hide();
        yuans.parent().siblings().children(".slii").children(".k").hide();
        yuans.parent().siblings().children(".slii").children(".t").show();
        yuans.children(".k").show();
    }
    }

加上几行代码就改成点击一个，另一个会消除这种样式。类似radio按钮。

**如果有什么疑问？可以加下我的qq:815682884 备注上你的问题 为你解忧。**

[20190127151040323.jpg]: /images/20210812/1a3680db88a34d03ad5034707a34023d.png
[20190127152808176.png]: /images/20210812/05922a3d61914d99ba7ff2fe2928f433.png

发表评论取消回复

表情：

评论列表（有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq实现轮播图(景深效果)——功能实现

最近工作不是很忙，正好可以多多练习一下`jq`，毕竟这块我实在是基础薄弱，在工作中经常会遇到各种各样的问题，导致效率很低。今天的案例是一个自动轮播图： ![在这里插入图

青旅半醒/ 2023年01月23日 09:52/ 0 赞/ 49 阅读

相关 jq实现滑动轮播效果

1、简单版本（无循环轮播，同时展示多张图片） [https://juejin.im/post/6844903799115497479][https_juejin.im_

桃扇骨/ 2022年12月17日 01:28/ 0 赞/ 264 阅读

相关 HTML+CSS+JQ实现图片轮播效果

焦点图广泛运用于主页的醒目位置放置广告，简单好用，加上效果也很好看。实现的效果： 5张图片每两秒轮播一次，右下角的数字随图片而变换，鼠标放在数字上图片停止，移走

灰太狼/ 2022年09月25日 02:30/ 0 赞/ 256 阅读

相关 JQ动画效果

一看到动画效果我就激动的不行，很多人学JS可能都是为了特效，duang~duang~，好啦，下面我就记录下我在李炎恢老师视频中学的动画，在这里记下笔记首先我们常用的动画有

迷南。/ 2022年08月01日 14:47/ 0 赞/ 279 阅读

相关 JQ实现效果：焦点选中样式

1、伪类：focus <!DOCTYPE html> <html> <head> <title>Char 5</title> <m

朴灿烈づ我的快乐病毒、/ 2022年06月12日 06:45/ 0 赞/ 228 阅读

相关 JQ实现效果：用户名表单验证

步骤： 1、判断当前失去焦点的元素是“用户名”还是“邮箱” 2、“用户名”，看是否小于6位，如果小于，就设置红色提醒 3、“邮箱”，用正则表达式判断是否符合邮箱格式，不符

逃离我推掉我的手/ 2022年06月10日 23:16/ 0 赞/ 202 阅读

相关 Windows安装多个python版本并互不影响

Windows安装多个python版本并互不影响（本文安装2.7和3.7版本） 1、官网下载python2.7和python3.7版本，安装，本文对应安装目录分别为：D

淡淡的烟草味﹌/ 2022年03月16日 02:48/ 0 赞/ 417 阅读

相关 css3实现switch开关效果

[css3实现switch开关效果][css3_switch] 之前阿里电面的时候问的一个问题，今天抽时间做了个demo。 ![997342-2016083014134

悠悠/ 2022年01月30日 19:51/ 0 赞/ 407 阅读

相关 jq实现多开关效果互不影响

有时候我们会用jq写一些特效，jq在控制DOM方面是非常方便的，虽然jq在最近几年没什么进展。下面就是一个实例图：![实例][20190127151040323.jpg]

素颜马尾好姑娘i/ 2021年09月17日 23:22/ 0 赞/ 326 阅读

相关微信小程序多列表渲染数据开关互不影响

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

旧城等待，/ 2021年08月13日 15:15/ 0 赞/ 425 阅读