javascript - 动态为对象分配属性名称

Question

基本上，在下面的代码中，有一个 for 循环，它生成 10 个元素，当我单击按钮时，它会控制台记录以下内容:

当前console.log:

Object {objectProperty: "0"} Object {objectProperty: "1"} Object {objectProperty: "2"} Object {objectProperty: "3"} Object {objectProperty: "4"} Object {objectProperty: "5"} Object {objectProperty: "6"} Object {objectProperty: "7"} Object {objectProperty: "8"} Object {objectProperty: "9"}

但是我希望对象属性名称是 <span> 的值，因此当我循环遍历元素时，它将分配一个新的属性名称，该名称与 <span> 相同。值。

因此，如果它正常工作，console.log 应该如下所示:

Object {0: "0"} Object {1: "1"} Object {2: "2"} Object {3: "3"} Object {4: "4"} Object {5: "5"} Object {6: "6"} Object {7: "7"} Object {8: "8"} Object {9: "9"}

到目前为止我所拥有的:

  $(document).on('change', "select[id*='checkBox']", function(e) {
    // Disable or Enable input fields
    if (($("option:selected", this).text() === "No")) {
      $(this).next().next().attr('readonly', true).addClass('input-disabled');
    } else {
      $(this).next().next().attr('readonly', false).removeClass('input-disabled');
    }
  });

  $(document).on('click', "#generateButton", function(e) {

    // Define associative arrays that will compose licence object
    var Signed = new Object();
    var NotSigned = new Object();
    var Licence = new Object();

    // On generate button click, get all values to dynamically create signed and unsigned values
    $('.list-group-item').each(function(key, value) 
    {
     
      var objectProperty = $(this)[0].children[1].innerHTML;
      Signed.objectProperty = $(this)[0].children[2].value;
      console.log(Signed);
    });   
  });


  // Append list-groups on page so that configuration elements can be appended
  $("#optionalFieldsRow").children().find('.panel-body').append("<div class='row'><div class='col-sm-6 left'><ul class='list-group'></ul></div><div class='col-sm-6 right'><ul class='list-group'></ul></div></div>");

  // Loop through configuration items and display element on page
  for (var i = 0; i < 10; i++) {
    $("#optionalFieldsRow").children().find('.left').find('.list-group').append("<li class='list-group-item'><select id='checkBox" + i + "' class='optionalFieldsRowCheckBox' name='checkBox" + i + "'><option>Yes</option><option>No</option></select><span class='optionalLabel'>" + i + "</span><input id='input" + i + "' type='text' value='" + i + "' name='input" + i + "'></li>");
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="page-wrapper">
  <div class="row">
    <div class="col-lg-12">
      <ul class="list-group">

          <!-- /.panel-body -->
          <div class="pull-right">
            <button name="Save configuration button" id="generateButton" class="btn btn-primary">Generate .properties</button>
            <!--<button name="Save configuration button" onclick="GenerateLicence(this);" id="generateButton" class="btn btn-primary">Generate .properties</button>-->
          </div>
      </ul>
    </div>
    <!-- /.col-lg-12 -->
  </div>

  <div id="optionalFieldsRow" class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <!-- /.panel-heading -->
        <div class="panel-body">
          <!-- Optional fields for licences -->
          <div class="row">

            <!-- /.row -->
          </div>
        </div>
        <!-- /.panel -->
      </div>
      <!-- /.col-lg-8 -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /#page-wrapper -->
</div>

Answer 1

var obj = {};
obj["<new property name>"] = <new property value>;