foreach循环PHP中的按钮弹出框答案

【问题标题】：Popover for buttons in a foreach loop PHPforeach循环PHP中的按钮弹出框
【发布时间】：2020-06-16 10:44:02
【问题描述】：

我有一个小问题。经过我想的一些测试和搜索工作，我问了我的问题。

我在每个循环中都有一个<form> 。对于每个按钮（它是一个将产品放入篮子的篮子按钮），我重新加载页面，但在刷新之前，我希望得到一个小弹出窗口，表明某事已完成。我认为最好的东西应该是 Popover。

 <form action="[{$oViewConf->getSelfActionLink()}]" method="post" class="form-inline">
                        <input type="hidden" name="fnc" value="tobasket_alsobought">
                        <input type="hidden" name="aproducts[[{$nKey}]][am]" value="1">
                        <input type="hidden" name="aproducts[[{$nKey}]][aid]" value="[{$_product->oxarticles__oxid->value}]">
                        <input type="hidden" name="aproducts[[{$nKey}]][anid]" value="[{$_product->oxarticles__oxid->value}]">

                        <button style="margin:3px auto;border:1px solid #080;border-radius:.25rem;background-color:white;" data-toggle="popover" data-trigger="focus" data-content="[{oxmultilang ident="WIDGET_NEWBASKETITEMMSG"}]" data-placement="right" type="submit" class="btn btn-info basket" title="[{oxmultilang ident="DETAILS_ADDTOCART"}]"><i class="simg simg-shopping-cart" style="margin-right:0;display:inline;"></i></button>
                    </form>

这是我的表单，我的 JS 看起来像这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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>
<script>
    $(document).ready(function() {
        $('[data-toggle="popover"]').popover("max-width", "80%");
    });
</script>

我得到了 Popover，但只针对每个循环中的第一个值/按钮

如何解决这个问题并让 Popover 对所有按钮都有效？

下面是它的外观截图。

我的 foreach 循环：

[{foreach from=$myArray item=_product name=_sProduktliste}]
...some template code to show article, price, img ....
                <div class="col-12" style="z-index:10;">
                [{oxhasrights ident="TOBASKET"}]
                <form action="[{$oViewConf->getSelfActionLink()}]" method="post" class="form-inline">
                    <input type="hidden" name="fnc" value="tobasket_alsobought">
                    <input type="hidden" name="aproducts[[{$nKey}]][am]" value="1">
                    <input type="hidden" name="aproducts[[{$nKey}]][aid]" value="[{$_product->oxarticles__oxid->value}]">
                    <input type="hidden" name="aproducts[[{$nKey}]][anid]" value="[{$_product->oxarticles__oxid->value}]">

                    <button style="margin:3px auto;border:1px solid #080;border-radius:.25rem;background-color:white;" data-toggle="crossSell_popover" data-trigger="focus" data-content="[{oxmultilang ident="WIDGET_NEWBASKETITEMMSG"}]" data-placement="bottom" type="submit" class="btn btn-info basket" title="[{oxmultilang ident="DETAILS_ADDTOCART"}]"><i class="simg simg-shopping-cart" style="margin-right:0;display:inline;"></i></button>
                </form>
                [{assign var="nKey" value=$nKey+1}]
                [{/oxhasrights}]
            </div>
        </div>
        [{if $nKey >= 12}]
        [{php}]break;[{/php}]
        [{/if}]
       [{/if}]
    [{/foreach}]

【问题讨论】：

你能把你的foreach循环的PHP代码贴出来吗？
这不显示你的循环逻辑。
我添加了 foreach 循环

标签： javascript php html css oxid

【解决方案1】：

您需要调整您的 jquery 脚本以将其应用于多个元素。

从这里检查答案：

Jquery matching multiple elements with same id/class

【讨论】：

【解决方案2】：

我解决了。

马拉他的回答帮助了我。

我改变了：

<script>
    $(document).ready(function() {
        $('[data-toggle="popover"]').popover("max-width", "80%");
    });
</script>

到

<script>
    window.onload = function(){ $('[data-toggle="crossSell_popover"]').popover() };
</script>

我还将名称更改为“crossSell_popover”以避免商店中其他功能出现问题。

和@我使用的底部

[{oxscript add="$('[data-toggle=\"crossSell_popover\"]').popover();"}]

将 js 添加到基本模板中。

非常感谢，祝你有愉快的一天

【讨论】：