javascript - peringatan sorotan js div

Question

Terdapat 10 ps, ​​​​dan ia akan diserlahkan apabila diklik, tetapi anda hanya boleh mengklik dua pada satu masa Ia bukan kotak semak tetapi p ringkas yang mengandungi kandungan, atau 10 perenggan teks yang berbeza js?

Answer 1

Idea umum

• Tambahkan atribut yang ditandai pada setiap p, lalainya adalah palsu,
  p[i].ditandai = palsu;

• Tukar atribut yang disemak bagi p semasa semasa mengklik, p[i].ditanda = !p[i].ditanda

• Semasa mengklik p, lalui atribut yang ditanda bagi semua p. Jika dua daripadanya ditandakan, kembalikan palsu untuk keluar dari fungsi tersebut. Terdapat juga beberapa syarat khusus untuk dinilai, dan anda boleh membuatnya perlahan-lahan mengikut idea anda.

Answer 2

Beri anda contoh - -
Lihat contoh terus: 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');
        }
    });

Nota: Sebab mengapa pengecam c-1 dan c-2 digunakan di sini dan bukannya indeks untuk mendapatkan elemen aktif, seperti $('.active').eq(0), adalah kerana indeks mempunyai susunan berurutan, yang akan membawa kepada klik Salah satu elemen sebelum atau selepas elemen yang diserlahkan sentiasa tidak sah.