使用带有条件的 Javascript 集合答案

【问题标题】：Using Javascript Collections with Conditions使用带有条件的 Javascript 集合
【发布时间】：2021-08-26 15:20:20
【问题描述】：

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

我无法选择包含“待付款”文本/短语的元素。问题可能是“待处理”和“已支付”之间的空间吗？因为我能够选择包含文本“已支付”的所有元素。
如果满足上述条件（元素的文本内容包含单词“Disbursed”或短语“Pending Disbursement”），如何使“req-amount-input”类的所有元素不可编辑（只读）？

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

    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;
            };

        }
    }

【问题讨论】：

req-status 类元素的 HTML 是什么？
@ikhvjs <span class="btn btn-sm btn-success req-status"><?php echo $row["disb_status"]; ?><i class="bi bi-check-all"></i></span>

标签： javascript arrays dom collections

【解决方案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>

【讨论】：