欢迎使用CSDN-markdown编辑器

来源：互联网发布：手机淘宝差评怎么改编辑：程序博客网时间：2024/05/17 20:46

jq判断两个列表是否都有选中

作为前端小白，本人今天遇到一个小小的坑，觉得有必要记录下来，长个记性了！

先上代码。

html

<html lang="zh-CN"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />    <title>充值</title>    <link href="../static/css/reset.css" rel="stylesheet">    <link href="../static/css/Recharge.css" rel="stylesheet"></head><body>    <div class='banner clearfix'>        <div>            <input type='text' id='tel' maxlength="13">            <img src="../static/image/person.jpg">        </div>    </div>    <div class='nav'>        <div class='selectType deposit'>中国移动</div>        <div class='selectType deposit'>中国联通</div>        <div class='selectType deposit'>中国电信</div>    </div>    <div class='main'>        <p>充话费</p>        <div>            <ul id='Btn'>                <li class='clickBtn deposit'>                    <div>                        <p>10元</p>                        <p>售价<span>10.05</span>元</p>                    </div>                </li>                <li class='clickBtn deposit'>                    <div>                        <p>20元</p>                        <p>售价<span>20.10</span>元</p>                    </div>                </li>                <li class='clickBtn deposit'>                    <div>                        <p>30元</p>                        <p>售价<span>29.97</span>元</p>                    </div>                </li>                <li class='clickBtn deposit'>                    <div>                        <p>50元</p>                        <p>售价<span>49.95</span>元</p>                    </div>                </li>                <li class='clickBtn deposit'>                    <div>                        <p>100元</p>                        <p>售价<span>99.90</span>元</p>                    </div>                </li>                <li class='clickBtn deposit'>                    <div>                        <p>200元</p>                        <p>售价<span>199.80</span>元</p>                       </div>                </li>                <li class='clickBtn deposit'>                    <div>                        <p>300元</p>                        <p>售价<span>299.70</span>元</p>                    </div>                </li>                <li class='clickBtn deposit'>                    <div>                        <p>500元</p>                        <p>售价<span>499.50</span>元</p>                    </div>                </li>            </ul>        </div>    </div>     <div id='a'></div>    <div id='b'></div>    <!-- 引入js -->    <script src="../static/js/jquery.min.js"></script>    <script src="../static/js/flexible.js"></script>    <script src="../static/js/template-native-debug.js"></script>    <script src="../static/js/Recharge.js"></script></body></html>

css

body{   width:100%;}button:focus{outline:0;}.clearfix:after {  content: " ";  display: block;  clear: both;  height: 0;}input{    border: none;    outline: none;}.banner{    padding:0 0 0 0.422535rem;}.banner div{    margin:0.28169rem 0 0 0;    width:100%;    padding:0 0 0.28169rem 0;    float:left;    border-bottom:0.014085rem solid #e1e2e6;}.banner input{    float:left;    width:80%;    height:1.408451rem;     font-size:0.84507rem;     line-height:1.408451rem;    margin:0.140845rem 0 0  0;}.banner img{    width:1.014085rem;    height:1.014085rem;    float:right;    margin:0.338028rem 0.633803rem 0 0;}.nav{    float:left;    /*display:none;*/    width:100%;    margin:0.28169rem 0;}.selectType{        float: left;    width: 18%;    height: 0.56338rem;    text-align:center;    line-height:0.56338rem;    margin: 0 5%;    background: #fff;    border: none;    border-radius: 0.140845rem;    font-size: 12px;    color: #3f69f2;    border:1px solid #3f69f2;}.main{    margin:0 0.422535rem;}.main>p{    width:100%;    font-size:0.535211rem;    color:#7b7e80;    margin:0.422535rem 0 0.422535rem 0;}.main ul li{    width:30%;    float:left;    color:#3f69f2;    margin:0 0 0.422535rem 0;}.main ul li div{    width:100%;    height:100%;    border:0.042254rem solid #3f69f2;    border-radius:0.140845rem;}.main ul li p{    width:100%;    text-align:center;}.main ul li p:nth-of-type(1){    margin:0.070423rem 0 0.070423rem 0;    font-weight:700;    font-size:0.394366rem;}.main ul li p:nth-of-type(2){    margin:0 0 0.070423rem 0;    font-size:0.309859rem;}.main ul li:nth-of-type(1){    margin:0 5% 0 0;}.main ul li:nth-of-type(2){    margin:0 5% 0 0;}.main ul li:nth-of-type(4){    margin:0 5% 0 0;}.main ul li:nth-of-type(5){    margin:0 5% 0 0;}.main ul li:nth-of-type(7){    margin:0 5% 0 0;}.main ul li:nth-of-type(8){    margin:0 5% 0 0;}.changeColor{    background:#3f69f2;    color:#fff;}.change{    background:#3f69f2;    color:#fff;}

js

    $(function () {    $("#tel").keyup(function(e) {          var phoneNum = this.value.trim();          //如果是删除按键，则什么都不做          if (e.keyCode === 8) {            this.value = phoneNum;            return;          }          var len = phoneNum.length;          if (len === 3 || len === 8) {            phoneNum += ' ';            this.value = phoneNum;          }    });      $('.clickBtn').on('click',function () {        $('.clickBtn').find('div').removeClass('changeColor');        $(this).find('div').addClass('changeColor');    });    $('.selectType').on('click',function () {        $('.selectType').removeClass('change');        $(this).addClass('change');    });    $('.deposit').on('click',function () {        if($('#Btn>li').find('div').is('.changeColor') && $('.nav>div').is('.change') && $('#tel').val()!=''){            console.log('跳转。。。')        }    })})

通过给需要点击的所有标签共同加一个类（class），两个列表点击的时候分别给加一个类（change,changeColor），这样不管点击哪一个需要选择的标签都会出发这个公共类绑定的事件，在通过在这个事件里判断两个列表的标签是否包含类(change,changeColor)。

阅读全文

0 0