Javascript 基于输入元素的类乘以HTML中的列表元素

我有一个带有

标记和特定类别的项目列表：

<li class="multiply">2 cars</li>

2辆车

我希望有一个输入字段，访问者可以在其中键入一个数字，所有具有“multiply”类的元素都将被相乘，如下所示：

<input type="number">5</input>

5

将

值更改为：

<li class="multiply">10 cars</li>

10辆车

---

我认为有可能做到这一点，但我所有的搜索都已干涸。

您是否使用某种框架（如Angular、React）或HTML模板语言？因为在纯HTML中，

应该改为

有多种方法可以实现这一点，每种方法都需要Javascript。您需要在输入字段中注册一个事件：

然后在一个
标记您需要处理更改并重新提交HTML

这里不详细介绍，但有一个可行的解决方案：
一种方法如下，对HTML进行了一些修改：

<li class="multiply"><span data-original="2">2</span> cars</li>


constmultiply=（e）=>{
设n=e.target.value，
elems=document.queryselectoral（'.multiply>span'）；
弗雷赫女士(
（el）=>{
el.textContent=n*el.dataset.original；
});
};
document.querySelector（'input'）。addEventListener（'input'，multiply）

两辆车

66块巧克力棒
两个苹果
输入一个乘数
不是有效的HTML。你的意思是
？是的，这就是我的意思，对不起。更新了CodePen，只对使用“multiply”类名的列表项进行了乘法。我使用Jekyll填充一个列表，大致如下所示：首先会出现一个数字（99%的时间，因为我有时也会在其中包含文本），然后是空格，然后是问题项。正如Rob所说，在我的解决方案中，数据可以随机出现在列表项中（甚至可以出现在末尾）。。。因此，这个解决方案可能会更好，因为数值被包装在一个单独的元素中。谢谢，直到你刚才在这里引用它，我才看到这个注释。但是，虽然位置对于诸如
String.prototype.match（…）
之类的方法并不一定重要，但如果数字能够可靠地定位在特定元素中，则需要比理想情况更多的工作。由于我正在生成整个
元素，没有立即添加
的解决方案，因此我还无法完成这项工作。不过，这帮了大忙，谢谢！
// a named function defined using Arrow syntax (since we don't
// need to access 'this'; we pass in the Event Object ('e')
// automagically from the later use of EventTarget.addEventListener():
const multiply = (e) => {

  // e.target is the <input> element, and here we store the value:
  let n = e.target.value,

  // here we retrieve the <span> elements that are the children
  // of the .multiply elements:
    elems = document.querySelectorAll('.multiply > span');

  // using NodeList.prototype.forEach() to iterate over the
  // NodeList of <span> elements:
  elems.forEach(
    // 'el' is the current Node of the NodeList over which we're
    // iterating:
    (el) => {
      // here we set the textContent of the current <span> element
      // to be equal to the result of the input-value multiplied
      // by the value held in the <span> element's data-original
      // attribute-value:
      el.textContent = n * el.dataset.original;
    });
};

// we use document.querySelector() to retrieve the first - if any -
// <input> element in the document (there's no sanity/safety check
// here, in production you should probably guard against the element
// being absent as if it's not there the function returns null).
// We then use EventTarget.addEventListener() to bind the multiply()
// function (note the deliberate lack of parentheses) as the event-
// handler for the 'input' event:
document.querySelector('input').addEventListener('input', multiply);