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是有前後順序的，會導致點擊上一次高亮的元素之前或之後的元素總有一邊失效。