javascript - 追加 [i] 命名项

Question

在我的代码中，我有一个输入字段，它是一个循环的值。

1. 用户在第一个字段中输入所需的值。
2. 用户单击按钮/徽章(单击我添加项目符号)以附加到模式。
3. 根据字段中的输入值显示带有项目符号数的模态框。

例如，如果输入是 3，模态框将有 3 个 text 框，其中占位符列为 Bullet1、Bullet2 和 Bullet3。

我想要的是用户在文本框中输入文本，然后将此信息附加到另一个模式中。例如，如果我输入 Bullet1:AA、Bullet2:BB 和 Bullet3:CC，它应该附加:

<li>AA</li><li>BB</li><li>CC</li>

使用我当前的代码，它附加

<li>CC</li><li>CC</li><li>CC</li>

这可能是我的 for 循环，但我已经尝试了一些方法，但仍然无法正常工作。见片段。

$(document).ready(function() {
  $('#bulletAddr').click(function() {
    $('#codeAddBullet').append(escape("<ul>"));

    function escape(value) {
      return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    }

    for (var i = 0; i < valueField.value; i++) {
      var varBullet = "Bullet"
      var varI = i + 1
      var varBR = "<br>"
      var bulletI = varBullet + varI

      var varBulletField = "bulletField"
      var bulletFieldI = varBulletField + bulletI

      $('#outPut').append(" <input type='text' id='" + bulletFieldI + "' placeholder=" + bulletI + ">" + varBR)
    }

    $('#addTheseBullets').click(function() {
      for (var i = 0; i < valueField.value; i++) {
        var varBulletFieldN = "#bulletField"
        var bulletFieldI = varBulletFieldN + bulletI
        var bulletValue = $(bulletFieldI).val()
        $('#codeAddBullet').append(escape("<li>") + bulletValue + escape("</li>"))

        function escape(value) {
          return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
        }
      }
    })
  })
})

.bsFireBrick {
    background-color: firebrick;
    border-color: black;
    color:white;
    border-color: #46b8da;
    padding:3px;
    border-radius: 5px;
}

<!-- Bootstrap CSS  & JS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Jquery -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<input type='text' id='valueField' placeholder="Enter # of Bullets to Add"> <span class="badge badge-info" id="bulletAddr" data-toggle="modal" data-target="#myModal2">Click me to add bullet</span>
<br>
<span class="bsFireBrick" id="clickForCode" data-toggle="modal" data-target="#myModal">#3 Click for Raw Code</span>

<!-- Trigger the modal with a button -->

<!-- Modal 2-->
<div class="modal fade" id="myModal2" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"> Bullet Adder</h4>
      </div>
      <div class="modal-body">
        <div id='outPut'>
        </div>
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" id="addTheseBullets">Add All Bullets </button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>
</div>

<div class="container">
  <!-- Trigger the modal with a button -->

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Code Below</h4>
        </div>
        <div class="modal-body">
          <p> &ltHTML&gt <br> &ltHEAD&gt <br> &ltTITLE&gt <span id="codeTitleHere">  </span> &lt/TITLE&gt <br> &ltSTYLE&gt <br> &lt/STYLE&gt
            <br> &ltBODY&gt <br> SUMMARY <br> HEADING <br> <span id="codeAddBullet"> </span>
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

你觉得你能帮我吗？

Answer 1

我在您的代码中发现了很多错误，因此我尝试修复它们。这是我所做的:

1. 我清理了代码，escape() 方法是全局的，因此它必须在 $(document).ready() 调用之外。
2. 我定义了常量，例如 baseName、baseId 和 varBR；
3. 我定义了两个变量，用于保存元素的大小和 ID。这在我需要重置该变量时很有用。
4. 在 $('#bulletAddr').click() 回调中，我定义了 id 和 placeholder id 将保存将在第三模态中使用的元素的 id。而 placeholder 是显示在 text 框中的名称。
5. 在 $('#addTheseBullets').click() 回调中，我定义了一个 id 并且是 bulletValue。如您所见，此 id 与第 4 点中定义的 id 相同。这将获得正确的值，如您在代码片段中所见。
6. 最后，我添加了一个 $('#myModal2 .close').click() 和 $('#clickForCode').click() 来关闭模态并打开最后一个模态。

检查这里的代码:

const baseName = 'Bullet';
const baseId = 'bullet_field_';
const varBR = '<br>';

let size;
let sizeField;

function escape(value) {
  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

$(document).ready(function() {
  sizeField = $('#valueField');
  $('#bulletAddr').click(function() {
    size = sizeField.val();
    $('#codeAddBullet').append(escape("<ul>"));
    for (var i = 0; i < size; i++) {
      let index = i + 1;
      let id = baseId + index;
      let placeholder = baseName + (i + 1);
      $('#outPut').append('<input type="text" id="' + id + '" placeholder="' + placeholder + '">' + varBR);
    }

    $('#addTheseBullets').click(function() {
      size = sizeField.val();
      for (var i = 0; i < size; i++) {
        let index = i + 1;
        let id = baseId + index;
        let bulletValue = $('#' + id).val();
        $('#codeAddBullet').append(escape('<li>') + bulletValue + escape('</li>'));
      }
      $('#myModal2 .close').click();
      $('#myModal').modal();
    });
  });
});

.bsFireBrick {
  background-color: firebrick;
  border-color: black;
  color: white;
  border-color: #46b8da;
  padding: 3px;
  border-radius: 5px;
}

#myModal {
  overflow: auto; !important;
}

<!-- Bootstrap CSS  & JS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Jquery -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<input type='text' id='valueField' placeholder="Enter # of Bullets to Add">
<span class="badge badge-info" id="bulletAddr" data-toggle="modal" data-target="#myModal2">Click me to add bullet</span>
<br>
<span class="bsFireBrick" id="clickForCode" data-toggle="modal" data-target="#myModal">#3 Click for Raw Code</span>

<!-- Trigger the modal with a button -->


<!-- Modal 2-->
<div class="modal fade" id="myModal2" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"> Bullet Adder</h4>
      </div>
      <div class="modal-body">
        <div id='outPut'></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" id="addTheseBullets">Add All Bullets </button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <!-- Trigger the modal with a button -->
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Code Below</h4>
        </div>
        <div class="modal-body">
          <p> &ltHTML&gt <br> &ltHEAD&gt <br> &ltTITLE&gt <span id="codeTitleHere">  </span> &lt/TITLE&gt <br> &ltSTYLE&gt <br> &lt/STYLE&gt
            <br> &ltBODY&gt <br> SUMMARY <br> HEADING <br> <span id="codeAddBullet"> </span>
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>