主页 / 问题 / 1604114
Accepted
Петрович
Asked:2025-01-05 19:56:52 +0000 UTC2025-01-05 19:56:52 +0000 UTC

对使用 Array.from 创建的数组进行过滤或

  • 772

最近在学JS。帮我解决以下问题：

有一个 NodeList，您需要从中提取 ID 及其值。您需要获取 3 个数组（按 ID），从中提取 VALUE

ID 看起来像这样：

visota_proema_custom_порядковый номер  
shirina_proema_custom_порядковый номер  
kolich_proema_custom_порядковый номер

我试过这个

let customProem = Array.from (document.querySelectorAll('[id*="_proema_custom"]'));
 

  let result = customProem.filter(function(val){
   return val == visota_proema_custom1;

    
  })
  console.log (customProem);
  console.log (result);
<div class="row">
  <div id="orig_inp">
  </div>
  <div id="custom_proem_2">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom2" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom2" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom2" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
  <div id="custom_proem_1">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom1" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom1" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom1" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
</div>

javascript

2 个回答

  1. 您需要获取 3 个数组（按 ID），从中提取 VALUE

    我会建议这个选项...

    const a = document.querySelectorAll('[id*="_proema_custom"]')
const o = [...a].reduce((obj, o) => {
  const k = o.id.split(/\d+/)[0]
  obj[k] ??= []
  obj[k].push(+o.value)
  return obj
}, {})
console.log(o)
    <div class="row">
  <div id="orig_inp">
  </div>
  <div id="custom_proem_2">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom2" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom2" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom2" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
  <div id="custom_proem_1">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom1" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom1" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom1" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
</div>

    • 0
  2. Best Answer

    为了从输入中获取值，将它们乘以组然后得到结果，您可以这样做：

    我们接收带有输入的块，然后单独处理每个块并将值相乘，然后显示最终值。

    如果需要保存中间值以供进一步处理，那么可以将它们放在数组中

    const result = document.getElementById('res'); // результирующий блок
document.getElementById('calc').addEventListener('click', calc); // Кнопка для рассчета
const blocks = document.querySelectorAll('[id*="custom_proem"]'); // блоки с данными

function calc() {
  result.innerHTML = ''; // Зачищаем предыдущий результат
  let itog = 0;
  //const resArray = [];
  blocks.forEach(block => { // Для каждого блока
    let resCalc = 0
    block.querySelectorAll('input').forEach(item => { // Считаем произведение
      resCalc = resCalc ? resCalc * +item.value : +item.value;
    });
    itog += resCalc; // Добавляем к общему ИТОГО
    //resArray.push(resCalc);
    // Добавляем текст в блок результата
    const p = document.createElement('p');
    p.innerText = `${block.id}: ${resCalc}`;
    result.appendChild(p);
  })
  // Добавляем Итого
  const p = document.createElement('p');
  p.innerText = `Суммарно: ${itog}`;
  result.appendChild(p);
}
    <div class="row">
  <div id="orig_inp">
  </div>
  <div id="custom_proem_2">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom2" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom2" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom2" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
  <div id="custom_proem_1">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom1" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom1" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom1" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
</div>
<button id="calc">Расчитать</button>
<div id="res"></div>

    • 0

相关问题