Question

我正在尝试使用数组创建按钮，但是当我尝试在文本输入中编写文本并尝试创建按钮时，它不会更改值。

function ready() {

  var family = ["demo1", "demo2", "demo3", "demo4", "demo5", "demo6"];

  function btns() {
    var btn = $("<button>" + family[i] + "</button>")
    $(btn).attr("data-search", family[i])
    $(btn).appendTo("#buttons")
  }

  var submit = $("<button>Submit</button>");
  var text = $("<input type='text' name='text'>");
  $(text).appendTo("#submit");
  $(submit).appendTo("#submit");



  for (i = 0; i < family.length; i++) {

    btns();
  }

  $(submit).on("click", function() {
    var textBtn = text.val();
    family.push(textBtn);
    btns();


  })

}
ready();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div class="row">
      <div id="buttons"></div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        <div id="gif"></div>
      </div>
      <div class="col-sm-9">
        <div id="submit"></div>
      </div>
    </div>
  </div>

</body>

Answer 1

这是您要找的东西吗？该代码已注释以向您显示步骤

var family = ["demo1", "demo2", "demo3", "demo4", "demo5", "demo6"];

// for each family add a button
const buttons = family.map(el => $(`<button data-search="${el}">${el}</button>`));
$('#buttons').append(buttons);

function addButton() {
  // get the value of the text input
  const val = $('#button-text').val();
  // if the value is not empty
  if (val.trim().length) {
    // create the new button and append it
    const btn = $(`<button data-search="${val}">${val}</button>`);
    $('#buttons').append(btn);
    // add the val to the family array
    family.push(val);
    // add the button to the buttons array
    buttons.push(btn);
    // reset the input field
    $('#button-text').val('');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="buttons">
</div>

<div>
  <input type="text" id="button-text"/>
  <button onClick="addButton()">Add Button</button>
</div>

Answer 2

现有代码的问题在于，您已经在for循环中声明了变量i，但在手动添加新按钮时并没有增加值。

如果按以下方式更新“提交按钮单击”事件，则将完成您要查找的内容：

$(submit).on("click", function(){
    var textBtn = text.val();
    family.push(textBtn);
    console.log(family);
    btns();
    i++; // Added the increment of 'i' here.
});

但是，我敢肯定有一种解决该问题的雄辩方法，它不需要跟踪数组索引。

Answer 3

这里没什么

您可能不需要使用js创建输入和按钮。您可以仅使用html创建它
for循环中的i是全局变量，在其前面放置一个关键字，然后将family[i]传递给btns函数

var family = ["demo1", "demo2", "demo3", "demo4", "demo5", "demo6"];

function btns(val) {
  var btn = $("<button>" + val + "</button>")
  $(btn).attr("data-search", val)
  $(btn).appendTo("#buttons")
}
for (let i = 0; i < family.length; i++) {
  btns(family[i]);
}




$("#submitBtn").on("click", function() {
  var textBtn = $("#submitIp").val();
  btns(textBtn);


})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div class="row">
      <div id="buttons"></div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        <div id="gif"></div>
      </div>
      <div class="col-sm-9">
        <div id="submit">
          <input type='text' id='submitIp' name='text'><button id='submitBtn'>Submit</button>
        </div>
      </div>
    </div>
  </div>

</body>

Answer 4

在这里，循环是主要问题...您需要单独添加元素

 function ready(){

var family = ["demo1","demo2","demo3","demo4","demo5","demo6"];

      function btns(){
          var btn = $("<button>" + family[i] + "</button>");
          $(btn).attr("data-search", family[i])
          $(btn).appendTo("#buttons")
      }

      var submit = $("<button>Submit</button>");
          var text = $("<input type='text' name='text'>");
          $(text).appendTo("#submit");
          $(submit).appendTo("#submit");



      for (i=0; i < family.length; i++){

          btns();
      }

      $(submit).on("click", function(){
          var textBtn = text.val();
          // family.push(textBtn);
          var btn = $("<button>" + textBtn + "</button>");
          $(btn).attr("data-search", textBtn)
          $(btn).appendTo("#buttons")
      })

 }
  ready();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="container">
    <div class="row">
      <div id="buttons"></div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        <div id="gif"></div>
      </div>
      <div class="col-sm-9">
        <div id="submit"></div>
      </div>
    </div>
  </div>

</body>

此外，我还没有更改您的代码。只是将您的代码粘贴到正确的代码块上：）

Answer 5

获取输入值时缺少选择器

function ready() {

  var family = ["demo1", "demo2", "demo3", "demo4", "demo5", "demo6"];

  function btns() {
    var btn = $("<button>" + family[i] + "</button>")
    $(btn).attr("data-search", family[i])
    $(btn).appendTo("#buttons")
  }

  var submit = $("<button>Submit</button>");
  var text = $("<input type='text' name='text'>");
  $(text).appendTo("#submit");
  $(submit).appendTo("#submit");



  for (i = 0; i < family.length; i++) {

    btns();
  }

  $(submit).on("click", function() {
    var textBtn = $( "input[name='text']" ).val();
    family.push(textBtn);
    btns();


  })

}
ready();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div class="row">
      <div id="buttons"></div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        <div id="gif"></div>
      </div>
      <div class="col-sm-9">
        <div id="submit"></div>
      </div>
    </div>
  </div>

</body>

Answer 6

您是在i函数中引用btns。推荐的方法是为任何变量创建范围。我更喜欢使用let和const来定义变量的范围。

您必须将迭代移至btns函数中，并创建另一个函数，该函数仅负责创建一个以文本作为参数传递的按钮。然后从您的btns函数中调用create button函数。而且，即使对于您的click事件处理程序，您也可以轻松地重新使用创建按钮功能。

示例代码可在此处找到：https://codesandbox.io/s/pop7vkzpx

想要创建一个数组按钮

6 个答案: