Question

我有一段时间陈述显示我的所有产品，例如：https://gyazo.com/68f2ae0dd80e21b6a5f0a7deeb49877f。我有一个javascript / jquery代码片段，点击后会显示如下模式：https://gyazo.com/e9b4cf948ec228f221d2526244c2f7bc。我遇到的问题是，当我点击左边第一个产品的Paypal按钮时，模式才会显示。当我单击右侧Keyvault产品上的Paypal按钮时，它不会显示模态，尽管它是一个while循环，所以它应该使用相同的名称。

我的模态：

    <div class="modal fade" id="Loading_purchase_status" style="display: none;">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Payment Status (Don't close this during a payment) <div style="float: right;"><img src="<?php echo $site_config->grabSiteSettings($con, 'site_url').'/pizza/styles/img/loading.gif'; ?>" style="width: 20px; height: 20px;"></div></h4> 
          </div>
          <div class="modal-body">
            <p>Payment Status: <div id="awaiting_payment_status">Awaiting Payment on the Paypal payment page...</div></p>
          </div>
          <div class="modal-footer">
            <a class="btn btn-primary" href="<?php echo $site_config->grabSiteSettings($con, 'site_url').'/pizza/myFiles.php'; ?>">My Files</a>
            <a class="btn btn-danger" data-dismiss="modal">Cancel</a>
          </div>
        </div>
      </div>
    </div>

我的Paypal按钮表单：

<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST" target="_blank">


    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="<?php
echo $site_config->grabSiteSettings_manual($con, 'paypal_address');
?>">
    <input type="hidden" name="item_name" value="<?php
echo $name;
?>">
    <input type="hidden" name="item_number" value="<?php
echo $id;
?>">
    <input type="hidden" name="amount" value="<?php
echo $price;
?>">
    <input type="hidden" name="quantity" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="custom" value="username=<?php
echo $username;
?>&product=<?php
echo $name;
?>">
    <input type="hidden" name="notify_url" value="<?php
echo $site_callback;
?>">
    <input type="hidden" name="cancel_return" value="<?php
echo $site_return_canceled;
?>">

    <button type="submit" class="btn btn-danger" id="paypal_submit" aria-hidden="true" data-backdrop="static" data-keyboard="false" style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float:left; margin-left: 9%;">
        <i class="fa fa-paypal"></i>aypal
    </button>
    <button type="submit" class="btn btn-danger" disabled="true" style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float: right; margin-right: 9%;">
        <i class="fa fa-btc"></i>itcoin
    </button>
</form>

我的Javascript / Jquery：

        $(document).ready(function() {
        $('#Loading_purchase_status').modal('hide');

        $('#paypal_submit').click(function () {
            $('#Loading_purchase_status').removeData('bs.modal').modal({backdrop: 'static', keyboard: false}); 
            $('#Loading_purchase_status').modal('show');
        });
    });

Answer 1

非常基本的错误。你需要使用类名而不是id。如果您有许多通过循环呈现相同ID的项目，浏览器会更改ID。

所以这是解决方法

将类名称分配给paypal按钮，例如

<button class="modalopenerbutton"

然后按如下方式编写脚本

$(document).ready(function() {
        $('#Loading_purchase_status').modal('hide');

        $('.modalopenerbutton').click(function () {
            $('#Loading_purchase_status').removeData('bs.modal').modal({backdrop: 'static', keyboard: false}); 
            $('#Loading_purchase_status').modal('show');
        });
    });

JS / JQUERY - 单击每个产品购买按钮时显示模态

1 个答案: