附加[i]个命名项目

时间：2019-06-06 12:49:10

标签： javascript html

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

  1. 用户在第一个字段中输入所需的值。
  2. 用户单击按钮/徽章（单击我以添加项目符号）以附加到模态。
  3. 根据字段中的输入值出现模态，并带有项目符号数。

例如，如果输入为3，则模态将具有3个text框，占位符列为Bullet1，Bullet2和Bullet3。 / p>

我想要的是用户在文本框中输入文本，然后将此信息附加到另一个模式中。 例如，如果我输入了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>

认为您可以帮助我吗？

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

请注意bulletI变量，您还应该拥有

var bulletI = varBullet + varI

在您的最后一个for循环中，即$('#addTheseBullets').click(function() {中的那个。

您的问题是，bulletI是上部循环中的OLD值。

相关问题
最新问题