javascript - jquery以循环方式shift生成按钮值

Question

我正在尝试做一些像这样的奇特的东西create button and shift values ，到目前为止我已经到达这里FIDDLE

$("#submit").click(function() {
    var n = $('#txtinp').val();
    if ($.isNumeric(n)) {
      //alert(n);
      var btns = $('#btns');
      for (var i = 1; i <= n; i++) {
        btns.append('<input type="button" id="b' + i + '" value="' + i + '"/>');
      }
    } else {
      alert("enter a number");
    }
    $("input[type='button']").click(function(e) {
      var idClicked = e.target.id;
      //alert($(this).attr("value"));
      if (idClicked == 'b1' && $(this).attr("value") == 1) {
        $(this).prop('value', n);
        var lastBtn = 'b' + n;
        for (var i = n; i > 1; i--) {
          $('#b' + i).prop('value', i - 1);
        }
      } else {
        var lastBtn = 'b' + n;
        for (var i = n; i >= 1; i--) {
          if ('b' + i == 'b1' && 'b' + n == n) {
            $('#b' + i).prop('value', i);
          } else {
            $('#b' + i).prop('value', i - 1);
          }
        }
      }
    });

});

如果单击第一个创建的按钮，我只能移动一次，但该功能或事件在第二次和以后的单击时不起作用。我以前没有 Jquery 经验，我在这里做错了什么？

如果问题太愚蠢，请不要投反对票。 提前致谢

Answer 1

这是一种可能的解决方案:

$(document).ready(function() {
  $("#submit").click(function() {
    var n = $('#txtinp').val();
    if ($.isNumeric(n)) {
      var btns = $('#btns').empty();
      for (var i = 1; i <= n; i++) {
        btns.append($('<button>').text(i));
      }
    } else {
      alert("enter a number");
    }

    $("#btns button").click(function(e) {
      var buttons = $('#btns button');
      buttons.each(function () {
        var currentValue = parseInt($(this).text());
        var newValue = currentValue - 1;
        if (newValue === 0) {
          newValue = buttons.length;
        }
        $(this).text(newValue);
      });
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtinp" />
<input type="button" id="submit" value="Submit" />
<div id="btns">

</div>