javascript - 如何为脚本元素内的数据属性设置值

Question

我有这个代码:

<div class="cc-selector col-md-3">
<form method="POST" action="<?php echo base_url() . 'home/cart_finish/go'; ?>" class="checkout-form">
    <input type="hidden" name="payment_type" value="omise">
    <script src="https://cdn.omise.co/omise.js.gz"
        data-key="<?php echo $omise_public_key_test; ?>"
        data-image=" "
        data-frame-label="Acme"
        data-button-label="<?php echo translate('pay_now');?>"
        data-submit-label="<?php echo translate('submit');?>"
        data-location="no"
        data-amount=" "
        data-currency="us"
        >

      var total = $('#grand').html();
      $("[data-amount]").attr('data-amount', total);
     </script>  
</form>

我想为“data-amount”属性设置一个值。我尝试了上面的代码，但它不起作用。

注意:Omise 是一个类似于 Stripe 的支付网关。该代码将呈现一个付费按钮。我必须在渲染之前设置数据量。这就是为什么我迫不及待地等待 $document 准备好。我希望这是有道理的。

Answer 1

附加 <script>元素至 document没有src属性。在单独的<script>元素选择script元素和集合data-amount属性，和 src属性到资源的路径。

    <script id="script"
        data-key="<?php echo $omise_public_key_test; ?>"
        data-image=" "
        data-frame-label="Acme"
        data-button-label="<?php echo translate('pay_now');?>"
        data-submit-label="<?php echo translate('submit');?>"
        data-location="no"
        data-amount=" "
        data-currency="us"
        >
     </script>  
     <script>           
     var total = $('#grand').html();
     $("#script[data-amount]")
     .attr({
       "data-amount": total,
       "src":"https://cdn.omise.co/omise.js.gz"
     });
     </script>
</form>