动态创建按钮阵列

时间:2017-10-05 14:52:42

标签: jquery html

我正在尝试从数组中动态创建按钮列表。每个元素对的第一部分包含按钮值,第二部分包含按钮名称。

这是我到目前为止的代码,它创建了一个来自数组的按钮列表,但名称没有正确链接(名称显示在按钮旁边,而不是在它们中)

如何正确格式化以满足我的需求?

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type=text/javascript>
        setInterval(function() {
            $.getJSON('/_load_node', {
            }, function(data) {
              if(data.test_result == 1) {
                $("div.value").html(data.test_result);
                var newHTML = [];
                for (var i = 0; i < data.next_steps.length; i++) {
                    newHTML.push('<p><button type="submit" name="action" value = ' + data.next_steps[i][0] + ' />' + data.next_steps[i][1] + '</button>');
                }
                $("div.button").html(newHTML.join(""));
              }
            return false;
          });
        }, 1000);
    </script>

</head>
<body>
<div class="value"></div>
<div class="button"></div>
</body>

检查页面时,看起来按钮被返回为<p><button type="submit" name="action" value = value/> </button> name,这对于将它们打印到侧面是有意义的。有没有办法让它正确返回?

2 个答案:

答案 0 :(得分:2)

button标签已在开幕式中关闭。

newHTML.push(
    '<p><button type="submit" name="action" value = '
    + data.next_steps[i][0]
    + ' />' // was closing this
    + data.next_steps[i][1]
    + '</button>');

修复

newHTML.push(
  '<p><button type="submit" name="action" value = ' 
  + data.next_steps[i][0] 
  + '>' 
  + data.next_steps[i][1]
  + '</button>');

答案 1 :(得分:0)

也使用引号,因为这是一个字符串:

newHTML.push('<p><button type="submit" name="action" value="' + data.next_steps[i][0] + '">' + data.next_steps[i][1] + '</button>');