javascript - js div高亮提醒

Question

有10个p，点击都有高亮提示，但是每次只能点两个，不是checkbox而是单纯的p包含内容,或者10段不同的文字，用js怎么实现呢？

Answer 1

大体思路

• 给每个p添加一个checked属性默认为false,
  p[i].checked = false;

• 点击的同时改变当前p的checked属性，p[i].checked = !p[i].checked

• 点击p的同时，遍历所有p的checked属性，如果有两个为checked，则return false退出函数，否则对该p的checked属性进行取反赋值。又有一些具体的条件判断，自己按照思路慢慢踩就出来。

Answer 2

给你个例子- -
直接查看实例：https://jsfiddle.net/677a1m6z/1/

html

    <p class="demo">高亮1</p>
    <p class="demo">高亮2</p>
    <p class="demo">高亮3</p>
    <p class="demo">高亮4</p>
    <p class="demo">高亮5</p>
    <p class="demo">高亮6</p>
    <p class="demo">高亮7</p>
    <p class="demo">高亮8</p>
    <p class="demo">高亮9</p>
    <p class="demo">高亮10</p>

css

    .demo {
        width: 140px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid;
        margin-bottom: 5px;
        box-sizing: border-box;
    }

    .active {
        background-color: #f55;
        color: #fff;
        border: 0;
    }

js

 $(document).on('click', '.demo', function() {
        $(this).addClass('active');
        var len = $('.active').length;
        //初始化处理最开始的两次点击
        if (len === 1) {
            $(this).addClass('c-1');
        }
        if (len === 2) {
            $(this).addClass('c-2');
        }
        //当已经有两个高亮，再次点击会取消最靠前一次点击的高亮
        //例如：先点击4和6，再点2则最靠前的4会被取消，再点7则最靠前的6又会被取消
        if (len === 3) {
            $('.c-1').removeClass('c-1 active');
            $('.c-2').removeClass('c-2').addClass('c-1');
            $(this).removeClass('c-1').addClass('c-2');
        }
    });

注：这里之所以用c-1、c-2标识符而不是index取active的元素，比如$('.active').eq(0)是因为index是有前后顺序的，会导致点击上一次高亮的元素之前或之后的元素总有一边失效。