javascript - 通过 jquery 取消选择按钮

Question

我有一个按钮，当变量超过库存变量时我会弹出一个弹出窗口:

$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        trigger: 'manual',
        placement: 'top',
        title: 'Ajouter un billet'
    })
    $('.plus').click(function () {
        var idP = $(this).attr('id');
        $.ajax({
            type: 'GET',
            url: Routing.generate('ajaxAddOneElemCart', {product_id: idP}),
            success: function (data) {
                var stock = data[2];
                $('.quantite' + idP).text(data[0]);
                if (stock > data[0]) {
                    $('.total').text(data[1]);
                } else {
                    $('.plus').attr('data-content', '<font color="red">ATTENTION: Il ne reste que ' + stock + ' billets disponibles. Vous ne pouvez pas en commander plus.</font>');
//                    $('[data-toggle="tooltip' + idP + '"]').popover();
                    $(this).tooltip('show');

                }
            }
        });
    });
    $('.moins').click(function () {
        var idP = $(this).attr('id');
        $.ajax({
            type: 'GET',
            url: Routing.generate('ajaxMinusElemCart', {product_id: idP}),
            success: function (data) {
                $('[data-toggle="tooltip' + idP + '"]').popover('destroy');
                $('.erreur' + idP).html('');
                $('.quantite' + idP).text(data[0]);
                $('.total').text(data[1]);
            }
        });
    });

});

HTML 代码:

<button tabindex="0" role="button" id="{{article[0].id}}" class="btn btn-succes plus"  data-toggle="tooltip">+</button>
<button type="button" id="{{article[0].id}}" class="btn btn-danger moins" title="Soustraire un billet">-</button>

$('[data-toggle="tooltip'+idP+'"]').popover() 必须在 data[0] 较小时执行作为变量 stok。它有效，但是:

如果我在 + 上单击多次，它会停在 50 处，但我没有弹出窗口。如果我单击屏幕的另一部分，然后再次单击 +，则会打开弹出窗口。

我必须取消选择该按钮吗？怎么办？

谢谢最好的问候

Answer 1

我可以看到你的问题。 $('[data-toggle="tooltip'+idP+'"]').popover() line 只是激活弹出窗口。弹出窗口的默认触发器是单击，例如，第 50 次单击，弹出窗口被激活，但在下一次单击时打开。您似乎还使用了工具提示和弹出窗口的组合，它们实际上是不同的东西。对于您应用此代码，我认为弹出窗口是最好的。要解决此问题:

1. 首先，加号和减号按钮最终将具有相同的 ID，这是无效的。对于我的代码，这些按钮不需要特定的 id，因此您可以将它们全部删除，或者，如果其他代码需要它们，请确保一页上没有两个相同的 id。

2. 对于按钮的 HTML，删除所有 data-属性。我建议通过 JS 来定义它们，这样更简洁。请记住 title加号按钮的属性将成为弹出窗口的标题。

3. 要显示弹出窗口，请替换 else 中的所有代码plus success 函数的部分与此相关。

   $(this).popover({
       trigger: 'manual',
       placement: 'top',
       html: true,
       content: '<font color="red">ATTENTION: Il ne reste que ' + stock + ' billets disponibles. Vous ne pouvez pas en commander plus.</font>'
   });
   $(this).popover('show');
   

   这会使用手动(仅限 JS)触发器初始化加号按钮的弹出窗口，将其放置在启用了 HTML 的附加元素和原始内容之上。然后它会显示弹出窗口。

4. 要隐藏弹出窗口，请输入 $(this).prev().popover('hide');而不是减号按钮的成功函数的第一行。这将隐藏 DOM 中前一个元素的弹出窗口，因此请确保加号按钮位于 HTML 中的减号按钮之前。

最后这意味着您的 HTML 是:

<button tabindex="0" role="button" class="btn btn-succes plus" title="Ajouter un billet">+</button>
<button type="button" class="btn btn-danger moins" title="Soustraire un billet">-</button>

...你的 JS 是:

$('.plus').click(function () {
    var idP = $(this).attr('id');
    $.ajax({
        type: 'GET',
        url: Routing.generate('ajaxAddOneElemCart', {
            product_id: idP
        }),
        success: function (data) {
            var stock = data[2];
            $('.quantite' + idP).text(data[0]);
            if (stock > data[0]) {
                $('.total').text(data[1]);
            } else {
                $(this).popover({
                    trigger: 'manual',
                    placement: 'top',
                    html: true,
                    content: '<font color="red">ATTENTION: Il ne reste que ' + stock + ' billets disponibles. Vous ne pouvez pas en commander plus.</font>'
                });
                $(this).popover('show');

            }
        }
    });
});

$('.moins').click(function () {
    var idP = $(this).attr('id');
    $.ajax({
        type: 'GET',
        url: Routing.generate('ajaxMinusElemCart', {
            product_id: idP
        }),
        success: function (data) {
            $(this).prev().popover('hide');
            $('.erreur' + idP).html('');
            $('.quantite' + idP).text(data[0]);
            $('.total').text(data[1]);
        }
    });
});

希望这有效，

图格兹里达。