改變一個應用程式的行為，如何根據一個數字隱藏一個結賬按鈕，這個數字是由一個總和和一個貨幣符號組成的字串的一部分？

但是如果后者是剩下的唯一選擇，那么基于MutationObserver的解決方案可能看起來類似于接下來提供的示例代碼...

// closed 3rd party code one neither can access nor hook into.
//
function updateNumberValueAtBoundTarget（{ currentTarget: { value }）{
  const { outputNode, currencySymbol } = this;
  輸出節點
    .value = [currencySymbol, value].join(' '/span>)。
}
function initializeThirdPartyCode(/span>) {
  document.
    .querySelector('[type="number"]'/span>)
    .addEventListener(
      'input',
      updateNumberValueAtBoundTarget.bind（{
        outputNode: document.querySelector('form output'/span>)。
        currencySymbol: '$'。
      })
    );
}
initializeThirdPartyCode()。

//可能的方法 ... `MutationObserver`
// - [https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver]
//
function handleBehaviorOfBoundCheckoutTarget（mutationsList）{ 
  const [ mutation ] = [ ...mutationsList];
  const {
    sourceNode,
    targetNode,
    lowerValidationValue = 10,
    upperValidationValue = 1000,
  } = this;

  if (
    (mutation.target == sourceNode) &&
    (mutation.type === 'childList') &&
    (mutation.addedNodes.length ==1)
  ) {
    const { nodeValue } = mutation.addedNodes?[0] ? ''。

    //將貨幣總數決議為一個數字值 ...
    const rawValue = parseFloat（nodeValue
      //...通過剝離任何領先的非數字字符...。
      .replace((/^D /), ' ')
      // ... and by stripping any trailing non digit characters.
      .replace((D $/), ''/span>)
    );
    const isDisableCheckout = (
      !Number.isFinite(rawValue)
      || (rawValue < lowerValidationValue)
      || (rawValue > upperValidationValue)
    );
    targetNode.disabled = isDisableCheckout。
  }
}
function initialize（）{
  const checkoutNode = document.querySelector('[type="submit"] ' /span>)。

  const observedNode = document.querySelector('.wapf-grand-total') 。
  const observerConfig = { childList: true/*, characterData: true */ };

  const observer = new MutationObserver(
    handleBehaviorOfBoundCheckoutTarget.bind（{
      sourceNode: observedNode,
      targetNode: checkoutNode,
      lowerValidationValue: 0.01,
      upperValidationValue: 260,
    })
  );
  observer.observe（observedNode, observerConfig）。
}
initialize(); 

body { margin: -2px 0 0 0; }
form { position: relative; overflow: hidden; }
fieldset { margin: 0 0 10px 0; }
[type="submit"] { padding: 10px; float: right; margin-right: 10px; }
[type="number"] { padding: 5px; width 5em; }
label > span,
label > input { display: block; }

<form>/span>
  <fieldset>/span>
    <legend>Total</legend>
    <output class="wapf-grand-total"/span>> $ 0</output>
  </fieldset>/span>
  <button type="submit"/span> disabled> 結賬</按鈕>/span>
</form>/span>

<label>/span>
  <span>模擬第三方總量計算</span>/span>
  < input type="number" min="0" max="100000" step="10" value="0"/> 
</label> 

uj5u.com熱心網友回復：

你可以通過這種方式避免快速執行

var cancelRapid ,timeGap = 500

function hidenv（） {
  clearTimeout(cancelRapid)
  cancelRapid = setTimeout(function(){
    //代碼在此。
    console.log("iggered")    
  },timeGap)
}

document.querySelector("input") 。 addEventListener("input",hidenv) 

<div> 
  <input type="text"/span> />
</div>/span>

標籤：

上一篇：以特定方式更改給定字串的順序

下一篇：如何在Tkinterpython中把字串轉換為整數？