Question

我正在尝试创建一个按钮，该按钮使用Bootstrap v4.3.1每单击 3次点击就会切换弹出窗口，而在单击一次后会关闭。这可能吗？

代码：

<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

您可以通过增加val sourceSocketFlow: Source[Message, NotUsed] = RestartSource.withBackoff( minBackoff = 3.seconds, maxBackoff = 30.seconds, randomFactor = 0.2, maxRestarts = 3 ) { () => val (response, source) = Source .tick(2.seconds, 2.seconds, TextMessage("Hello world!!!")) .viaMat(Http().webSocketClientFlow(WebSocketRequest("ws://mockbin.org/bin/82b160d4-6c05-4943-908a-a15122603e20")))(Keep.right).preMaterialize() response.onComplete { case Failure(e) ⇒ println(s"Connection failed") case Success(value) ⇒ if (value.response.status == StatusCodes.SwitchingProtocols) { println("Server supports websockets") } else { println("Server does not support websockets") } } source }

来实现

仅在3次单击+第一次之后

var

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

每3次单击+每次

如果您不想拒绝更改点击次数<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>

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');
        });
    });
});

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);
    }
});

Bootstrap 4：第三次点击后切换Popover

2 个答案: