Javascript/JQuery 值未设置

Question

我一直在尝试不同的技术来通过占位符“卡号”来设置我的值，但似乎没有任何效果。即使我尝试使用普通的 JavaScript，我也会收到 document.querySelector 为空的错误。

$('[data-card-field-placeholder*="Card"]').val('2222');

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="field__input-wrapper field__input-wrapper--icon-right"><label class="field__label field__label--visible" for="checkout_credit_card_number">Card number</label>
          <div class="field__input field__input--iframe-container" data-card-fields="number" data-card-field-placeholder="Card number" aria-describedby="error-for-number tooltip-for-number"><iframe class="card-fields-iframe" id="card-fields-number-fzjcuxuv2z000000" name="card-fields-number-fzjcuxuv2z000000" scrolling="no" src="" style="height: 43px;" frameborder="0"></iframe></div>
            <span id="credit_card_number_tooltip" class="field__icon icon icon--lock">
    <span class="visually-hidden">Secure field</span>
  </span>

        </div>

Answer 1

您可以使用 text() 而不是 val()。像这样:

$('[data-card-field-placeholder*="Card"]').text('2222');

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="field__input-wrapper field__input-wrapper--icon-right"><label class="field__label field__label--visible" for="checkout_credit_card_number">Card number</label>
          <div class="field__input field__input--iframe-container" data-card-fields="number" data-card-field-placeholder="Card number" aria-describedby="error-for-number tooltip-for-number"><iframe class="card-fields-iframe" id="card-fields-number-fzjcuxuv2z000000" name="card-fields-number-fzjcuxuv2z000000" scrolling="no" src="" style="height: 43px;" frameborder="0"></iframe></div>
            <span id="credit_card_number_tooltip" class="field__icon icon icon--lock">
    <span class="visually-hidden">Secure field</span>
  </span>

        </div>