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事件.on()，例如更改，单击，键入键，否则可以将一个或多个事件的事件处理函数附加到所选元素，您可以阅读文档here。

此处是更新的代码

$(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的帮助下，我会这样做。

了解需要跟踪哪些输入字段以进行更改。我将在所有这些字段上讲授课程（track-me）。
在准备好的文档中，我将寻找该跟踪字段的更改。
更改该字段后，我将获得该值并将其输入其他输入字段（类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

JavaScript在跨度中更改值和值中的数据

4 个答案: