JavaScript在跨度中更改值和值中的數據

Question

我需要這方面的幫助。 在用戶會話處於活動狀態時，我需要始終在其他位置更改值。 如何從范圍中獲取值並在數據更改中獲取其他值？

看那里！

 1 <div class="pt-uea-container">
 2  <span class="pt-uea-currency pt-uea-currency-before"> € </span>
 3  <input type="text" class="pt-field pt-uea-custom-amount" autocomplete="off" name="pt_items[1][amount]" id="pt_uea_custom_amount_1" value="199" placeholder="" data-parsley-errors-container="#pt_uea_custom_amount_errors_1">
 4  <input type="hidden" class="pt-field pt-uea-custom-amount-formatted" name="pt_items[1][amount]" value="199" data-pt-price="199">
 5  <input type="hidden" name="pt_items[1][label]" value="Amount:">
 6  <input type="hidden" name="pt_items[1][tax_percentage]" value="0">
 7  <input type="hidden" name="pt_items[1][type]" value="open">
 8  <div id="pt_uea_custom_amount_errors_1"></div>
 9  <span class="form-price-value">85</span>
10 </div>

第9行中的值需要在同一會話中不斷更改第3行和第4行中的值。 不要介意第6行中的值。

讓我知道如何完成這項工作。 還是不同的方法？

問候！

========

所以這是我現在從你們這里得到的：

jQuery(document).ready(function($) {
var checkViewport = setInterval(function() {
var spanVal = $('.form-price-value').text();
$('#pt_uea_custom_amount_1').val(spanVal);
$('#pt_uea_custom_amount_formatted_1').val(spanVal);
$('#pt_uea_custom_amount_formatted_1').attr('data-pt-price', spanVal);
}, 1000);

});

這段代碼有效，但是僅當我將鼠標放在pt字段pt-uea-custom-amount中並在其中添加空格時，它才會影響我的需求。 然后，它確實適用於頁面源。 但這是不正確的。 源代碼也需要更改，而不必碰到該類，空格或其他東西！

Answer 1

這不是理想的解決方案。 我不確定span元素的innerHTML更改時是否有經過驗證的偵聽方式。 這類內容通常基於用戶交互，並且跨度的值將由您的頁面修改。 最好的解決方案是使用與更新span元素相同的方法來更新隱藏輸入字段的值。 但是，我放置了一個間隔，該間隔將每秒運行一次，該間隔采用span元素的文本值並將其賦予2個輸入字段的值：

 function start() { setInterval(function() { document.getElementById("pt_uea_custom_amount_1").value = document.getElementById("price_value").innerHTML; document.getElementById("pt_uea_custom_amount_2").value = document.getElementById("price_value").innerHTML; }, 1000); } window.onload = start(); 

 <div class="pt-uea-container"> <span class="pt-uea-currency pt-uea-currency-before"> € </span> <input type="text" class="pt-field pt-uea-custom-amount" autocomplete="off" name="pt_items[1][amount]" id="pt_uea_custom_amount_1" value="199" placeholder="" data-parsley-errors-container="#pt_uea_custom_amount_errors_1"> <input type="hidden" class="pt-field pt-uea-custom-amount-formatted" name="pt_items[1][amount]" value="199" data-pt-price="199" id="pt_uea_custom_amount_2"> <input type="hidden" name="pt_items[1][label]" value="Amount:"> <input type="hidden" name="pt_items[1][tax_percentage]" value="0"> <input type="hidden" name="pt_items[1][type]" value="open"> <div id="pt_uea_custom_amount_errors_1"></div> <span id="price_value" class="form-price-value">85</span> </div> 

Answer 2

試試這個，簡單的使用jQuery，您可以檢入檢查元素的值屬性data-pt-price

更新：您可以使用jquery event .on()更改，單擊，鍵入或其他操作，以將一個或多個事件的事件處理函數附加到所選元素上，您可以在此處閱讀文檔。

這是更新的代碼

 $(function() { var spanVal = $('#price_value').text(); $('#pt_uea_custom_amount_1').val(spanVal); $('#pt_uea_custom_amount_formatted_1').val(spanVal); $('#pt_uea_custom_amount_formatted_1').attr('data-pt-price', spanVal); $('#pt_uea_custom_amount_1').on('change click keyup', function() { $('#pt_uea_custom_amount_formatted_1').val($(this).val()); $('#price_value').text($(this).val()); $('#pt_uea_custom_amount_formatted_1').attr('data-pt-price', $(this).val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pt-uea-container"> <span class="pt-uea-currency pt-uea-currency-before"> € </span> <input type="text" class="pt-field pt-uea-custom-amount" autocomplete="off" name="pt_items[1][amount]" id="pt_uea_custom_amount_1" value="199" placeholder="" data-parsley-errors-container="#pt_uea_custom_amount_errors_1"> <input type="hidden" class="pt-field pt-uea-custom-amount-formatted" name="pt_items[1][amount]" value="199" data-pt-price="199" id="pt_uea_custom_amount_2"> <input type="hidden" name="pt_items[1][label]" value="Amount:"> <input type="hidden" name="pt_items[1][tax_percentage]" value="0"> <input type="hidden" name="pt_items[1][type]" value="open"> <div id="pt_uea_custom_amount_errors_1"></div> <span id="price_value" class="form-price-value">85</span> </div> 

Answer 3

您可以借助jQuery輕松地做到這一點。

在jQuery的幫助下，我會這樣做。

1. 了解需要跟蹤哪些輸入字段以進行更改。 我將在所有這些領域上一堂課（ track-me ）。
2. 在准備好的文檔中，我將尋找該跟蹤字段的更改。
3. 更改該字段后，我將獲得該值並將其輸入其他輸入字段（類copy-to -或您可以執行任何操作）。

參見下面的示例，

的HTML

<form>
    <div class="">
      <input type="text" class="track-me" value=""/>
    </div>
    <div class="">
      <input type="text" class="copy-to" value=""/>
    </div>
    <div class="">
       <input type="text" class="copy-to" value=""/>
    </div>
    <div class="">
      <input type="text" class="copy-to" value=""/>
    </div> 
    <div class="">
      <div class="">Please type anything in the first input box</div>
    </div>
  </form>

jQuery的

$(document).ready(function(){
    $('.track-me').change(function (){
        $('.copy-to').val($(this).val())
    });
});

我在上面的jQuery代碼中添加了注釋，以便您理解。 另外，我做了一個小提琴，讓您可以玩耍，看看。 在這個小提琴中，我只是出於樣式目的而使用Bootstrap4 ，您不必為此擔心。

鏈接到小提琴

https://jsfiddle.net/anjanasilva/r21u4fmh/21/

我希望這有幫助。 如有問題，請隨時問我。 干杯。

Answer 4

MutationObserver應該在這里工作。

const formValuePrice = document.querySelector( '.form-price-value' );
const inputText = document.querySelector( 'input[type="text"]' );

// timer to change values
window.setInterval( () => {
    formValuePrice.textContent = Math.round( Math.random() * 100 );
}, 1000 );

// mutation observer
const observer = new MutationObserver( ( mutationsList ) => {
    inputText.value = formValuePrice.textContent;
} );

observer.observe( formValuePrice, { childList: true } );

https://codepen.io/anon/pen/LgWXrz?editors=1111