Question

我遇到了一些我在CodePen和JSFiddle工作的东西，但在我的实际页面中进行测试时仍然无法工作。

这是我的HTML：

    <form class="form-horizontal">

          <!-- Text input-->
          <div class="form-group">
            <label class="control-label col-md-3" for="textinput">Add Item:</label>
            <div class="col-md-9">

              <input id="textinput" name="textinput" class="input-large" type="text">
              <button id="add-button" name="button" class="btn btn-primary">Add <img class="caret" src="img/caret.png" alt=""></button>
            </div>
          </div>
        </form>

        <!-- Text output-->
        <div class="col-md-3 json-output">
          <p>JSON:</p>
        </div>  
        <div class="col-md-9">
          <div id="json"></div>


        </div>

这里是jQuery：

  $(document).ready(function() {

    $('#add-button').click(function(event){
      event.preventDefault();

        var inputVal =  $('#textinput').val();
          $('#json').html(inputVal);

    });

  });

我希望能够在添加项目中输入文字，然后点击添加以添加到下面的字段。我最初有另一个输入字段但是根本没有工作，所以我把它留作现在的div，它在jsfiddle上开启和关闭。这就是：http://jsfiddle.net/gV5Pt/16/

我想要做的第二部分是输入文本后我希望该值为JSON格式。

我希望我能在这里走上正轨。

谢谢！

Answer 1

两件事：

<强> 1。要使添加按钮正常工作。

不要设置 #json div的html，追加：

var $json = $('#json').append('<p>' + inputVal + '</p>'); 
//or use other tags, or leave them off altogether and append a comma, etc...

<强> 2。转换为JSON

这将取决于您正在寻找的格式。 JSON是一种键值结构。你已经获得了价值，那么你想要什么作为关键？为了帮助您入门，我将构建一个脚本，为您提供一个带有一个密钥和输入值的JSON：

var json = { values: []};

$('#json').each(function(i, e) {
    json.values.push($(e).find('p').text());
});

当然，如何获取值取决于您首先如何追加它们。如果您使用逗号分隔列表而不是使用$(e).find('p').text().split(',')标记，则可以使用p。我会把它留给你，但希望我已经给你一个正确的方向。

通过单击将文本添加到显示区域并将该值转换为JSON

1 个答案: