使用 Javascript 个带条件的集合

Question

我正在尝试根据文本内容是否满足特定条件来为元素设置 'readonly' 属性。具体而言，条件是元素必须包含文本“已支付”或“待支付”。我遇到了两个问题，我似乎无法克服几个小时；

我无法 select 包含 text/phrase“待付款”的元素。问题可能是“待处理”和“已支付”之间的 space 吗？因为我能够 select 所有包含文本“已支付”的元素。
如果满足上述条件（元素的文本内容包含单词 'Disbursed' 或短语 'Pending Disbursement')?

这是我到目前为止的想法。

    var statusClassCollection = document.getElementsByClassName('req-status');
    var textContent_criteria = ['Disbursed', 'Pending Disbursement'];
    var approvedReqsCollection = Array.prototype.filter.call(
        statusClassCollection,
        ({
            textContent
        }) => textContent_criteria.includes(textContent)
    );

    for (j = 0; j < approvedReqsCollection.length; j++) {

        var amountsClassCollection = document.getElementsByClassName("req-amount-input");
        for (i = 0; i < amountsClassCollection.length; i++) {

            amountsClassCollection[i].readonly = true;
            amountsClassCollection[i].editReqAmount = function() {
                return false;
            };

        }
    }

Answer 1

这是例子。我想如果有任何 Disbursed 或 Pending Disbursement span 元素，你想将所有输入设置为 readOnly。

const statusClassCollection = document.getElementsByClassName("req-status");
const criteria = ["Disbursed", "Pending Disbursement"];

let isCriteriaMatched = false;

for (let i = 0; i < statusClassCollection.length; i++) {
  if (criteria.includes(statusClassCollection[i].textContent)) {
    isCriteriaMatched = true;
    break;
  }
}

if (isCriteriaMatched) {
  const amountsClassCollection =
    document.getElementsByClassName("req-amount-input");
  for (let i = 0; i < amountsClassCollection.length; i++) {
    amountsClassCollection[i].readOnly = true;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <span class="btn btn-sm btn-success req-status"
        >Disbursed<i class="bi bi-check-all"></i
      ></span>
      <span class="btn btn-sm btn-success req-status"
        >Pending Disbursement<i class="bi bi-check-all"></i
      ></span>
      <span class="btn btn-sm btn-success req-status"
        >Pending Disbursement<i class="bi bi-check-all"></i
      ></span>
      <span class="btn btn-sm btn-success req-status"
        >Disbursed<i class="bi bi-check-all"></i
      ></span>
    </div>
    <div>
      <input class="req-amount-input" type="text" />
    </div>
  </body>
</html>

使用 Javascript 个带条件的集合

Using Javascript Collections with Conditions

javascript

arrays

collections

dom