Question

该代码获取input的值并将其发送到textarea，但是当您添加多个title时，这些值将在{{1 }}，例如titles的{{1}}与DESCRIPTIONS中的相同，为什么会这样？以及如何在不改变目的的情况下使其起作用？

运行codepen.io或jsfiddle.net中的代码

会发生这种情况：

这应该发生：

title 1

title 2

Answer 1

好的。这是因为函数结果中的这部分代码：

if (titu[0]) {
  for (var k = 0; k < titu.length; k++) {
    if (titu[k].value.trim() != '') {
      res.value += `<div>
        <span>${titu[k].value.trim()}</span>
        </div>
        <ul>\n`;
      for (var j = 0; j < inp2.length; j++) {
        if (inp2[j].value.trim() != '') {
         res.value += `<li>${inp2[j].value.trim()}</li>\n`;
        }
      }
    }
  }
}

您的标题具有相同的名称：'titu'，而您的描述具有相同的名称：'inp2'，
并且您有两个嵌套循环，每个标题都有描述的循环，其结果如您所见。
最好更改代码并使用不同的名称和ID
顺便说说。如果您坚持不更改代码，则应对两个代码都使用一个循环，例如此代码

if (titu[0]) {
  for (var k = 0; k < titu.length; k++) {
    if (titu[k].value.trim() != '') {
      res.value += `<div>
        <span>${titu[k].value.trim()}</span>
        </div>
        <ul>\n`;
        if (inp2[k].value.trim() != '') {
         res.value += `<li>${inp2[k].value.trim()}</li>\n`;
      }
    }
  }
}

更新
对于每个标题有更多描述的情况，您必须更改Title +和Description +的onClick方法的代码，添加的标题及其所有描述必须具有相同的父项，然后，可以解决这样的问题。（假设我已经说过的父母的班级名称为“父母”）

function result() {
    var parents = document.querySelectorAll(".parent")
    parents.forEach(function(parent){
       var title = parent.querySelector("titu");
       var descriptions = parent.querySelectorAll("inp2");
       var res = document.getElementById("result");
       if (title.value.trim() != '') {
           res.value += `<div>
           <span>${title.value.trim()}</span>
           </div>
           <ul>\n`;
       }
       descriptions.forEach(function(inp2){
          if (inp2.value.trim() != '') {
             res.value += `<li>${inp2.value.trim()}</li>\n`;
          }
       });
    }); 
}

请注意，此代码在修改Title +和Description +事件并在标题和说明输入中添加具有类名parent的相同父项后可以工作

在两个不同的区域重复循环时该怎么办

1 个答案: