javascript - rappel de surbrillance js div

Question

Il y a 10 ps, ​​et ils seront mis en surbrillance lorsque vous cliquerez dessus, mais vous ne pouvez cliquer que sur deux à la fois. Ce n'est pas une case à cocher mais un simple p contenant du contenu, ou 10 paragraphes de texte différents. js ?

Answer 1

Idée générale

• Ajoutez un attribut vérifié à chaque p, la valeur par défaut est false,
  p[i].checked = false;

• Modifiez l'attribut vérifié du p actuel en cliquant, p[i].checked = !p[i].checked

• En cliquant sur p, parcourez tous les attributs vérifiés de p. Si deux d'entre eux sont cochés, renvoyez false pour quitter la fonction. Sinon, annulez et attribuez l'attribut vérifié de p. Il y a aussi des conditions spécifiques à juger, et vous pouvez y arriver lentement en fonction de vos idées.

Answer 2

Donnez-vous un exemple - -
Voir l'exemple directement : 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');
        }
    });

Remarque : La raison pour laquelle les identifiants c-1 et c-2 sont utilisés ici à la place de l'index pour obtenir des éléments actifs, tels que $('.active').eq(0), est que l'index a un ordre séquentiel, ce qui conduisent à des clics. L'un des éléments avant ou après un élément en surbrillance est toujours invalide.