Bootstrap 4: переключить поповер после третьего щелчка

Question

Я пытаюсь создать кнопку, которая переключает поповер каждый раз при 3 щелчках и после однократного нажатия с помощью Bootstrap v4.3.1.Возможно ли это?

Код:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
  $(function() {
    $('[data-toggle="popover"]').popover()
  })
</script>

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-content="You've clicked on this button three times">Click 3 times</button>

Answer 1

Вы можете достичь этого с помощью приращения var

ПОСЛЕ 3 НАЖМИТЕ + ТОЛЬКО В ПЕРВЫЙ РАЗ

var clicked = 0;

$('.btn').on('click', function (e) {
    clicked++;

    if (clicked >= 2) {
        clicked = 0;
        $('[data-toggle="popover"]').popover();
    } else {
        e.preventDefault();
    }
});

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-content="You've clicked on this button three times">Click 3 times</button>

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

ПОСЛЕ 3 НАЖМИТЕ + КАЖДЫЙ ВРЕМЯ

ЕСЛИ ВЫ НЕ ХОТИТЕ ОТМЕНИТЬ ИЗМЕНЕНИЕ КЛИКНОВАНИЯ CLICKED TO 1

$(this).on('hidden.bs.popover', function () {
     clicked = 0; // CHANGE 1 IF YOU DONT WANT DISMISS CLICK 
     $('[data-toggle="popover"]').popover('dispose');
});

$(document).ready(function () {
    var clicked = 0;
    $('.btn').on('click', function (e) {
        clicked++;
        if (clicked === 2) {
            $('[data-toggle="popover"]').popover();
        } else {
            return false;
        }

        $(this).on('hidden.bs.popover', function () {
            clicked = 0; // CHANGE 1 IF YOU DONT WANT DISMISS CLICK 
            $('[data-toggle="popover"]').popover('dispose');
        });
    });
});

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-content="You've clicked on this button three times">Click 3 times</button>

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 2

Возможно, вы захотите сохранить значение на самом элементе, чтобы сделать его многократно используемым и для других кнопок:

$('.btn').on('click', function (e) {

    var target = e.target;
    var clickCount = parseInt(target.getAttribute('data-clickCounter'));

    if (clickCount) {
        if (clickcount === 2) {
            target.setAttribute('data-clickCounter', clickCount + 1);
            // add code to show pop-up
        } else if (clickcount === 3) {
            target.setAttribute('data-clickCounter', 0);
            // add code to hide the pop-up
        } else {
            target.setAttribute('data-clickCounter', clickCount + 1);
        }
    } else {
        target.setAttribute('data-clickCounter', 1);
    }
});