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 code：

<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()与变量stok一样时，必须对{p> data[0]进行操作。它有效但是：

enter image description here

如果我点击 + 上的不同时间，它会在50时停止，但我没有弹出窗口。如果我点击屏幕的另一部分然后点击 + 上的另一个时间，它会打开弹出框。

我是否要取消选择按钮？怎么样？

由于最好的问候

Answer 1

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

首先，加号和减号按钮最终会有相同的ID，这是无效的。对于我的代码，按钮不需要特定的ID，因此您可以将它们全部一起删除，或者如果您需要其他代码，则确保在一个页面上没有两个ID相同。
< / LI>
对于按钮的HTML，请删除所有data-属性。我建议通过JS来定义这些，这更加简洁。请记住，加号按钮的title属性将成为弹出窗口的标题。
要显示弹出窗口，请使用此替换加号成功函数的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');
```
这会使用手动（仅限JS）触发器初始化加号按钮的弹出框，将其附加到已启用HTML的元素上方以及原始内容。然后显示弹出窗口。
要隐藏弹出框，请将$(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]);
        }
    });
});

希望这有效，

Tugzrida。

通过jquery取消选择按钮

1 个答案: