Question

我正在创建一个时间表生成网站，作为我项目的一部分，我一度陷入困境。

使用for循环，我为主题和院系生成用户选择的文本框。现在问题是我无法获得那些动态生成的文本框的值。我想获取值并将其存储到数组中，以便稍后我可以将其存储到数据库

如果我使用的是localstorage，那么它有时会显示NaN或undefined。请帮帮我。

以下是我的Jquery代码

$.fn.CreateDynamicTextBoxes = function()
        {
            $('#DynamicTextBoxContainer, #DynamicTextBoxContainer2').css('display','block');

            InputtedValue = $('#SemesterSubjectsSelection').val();

            SubjectsNames = [];

            for (i = 0; i < InputtedValue; i++)
            {
                TextBoxContainer1 = $('#DynamicTextBoxContainer');
                TextBoxContainer2 = $('#DynamicTextBoxContainer2');

                $('<input type="text" class="InputBoxes" id="SubjectTextBoxes'+i+'" placeholder="Subject '+i+' Name" style="margin:5px;" value=""><br>').appendTo(TextBoxContainer1);
                $('<input type="text" class="InputBoxes" id="FacultyTextBoxes'+i+'" placeholder="Subject '+i+' Faculty Name" style="margin:5px;" value=""><br>').appendTo(TextBoxContainer2);
                SubjectsNames['SubjectTextBoxes'+i];
            }

            $('#DynamicTextBoxContainer, #UnusedContainer, #DynamicTextBoxContainer2').css('border-top','1px solid #DDD');
        }

        $.fn.CreateTimeTable = function()
        {
            for (x = 0; x < i; x++)
            {
                localStorage.setItem("Main"+x, +SubjectsNames[i]);
            }
        }

我也发布截图以便更好地理解

Answer 1

据我所知，您为每个主题创建了2个文本框，一个用于主题，第二个用于教师。你想把它作为一个jQuery插件。

首先，我认为您应该创建单个插件而不是两个，并从插件中公开您需要的内容。

您应该避免使用全局变量，现在您将InputtedValue，i，SubjectsNames等声明为全局变量，我相信您不应该这样做，但请保持你插入的这些变量只暴露你真正需要的东西。

您声明了SubjectNames，但稍后在第一个for循环中尝试访问其属性，并且实际上对此无效。在第二个for循环中，您尝试将其作为数组访问，但它是空的，因为您没有在其中分配任何值。

看看我创建的代码片段。我不会玩jQuery，特别是使用自定义插件，所以代码并不完美，可以优化，但我相信它显示了这个想法。我在配置对象中传递了一些选择器，使其更具可重用性。我添加了2个按钮，使其更具可玩性和＃34;，但您可以根据需要更改它。准备按钮创建动态文本框，按钮生成获取其值和＆＃34;打印＆＃34;他们在结果div。从插件中公开generate方法以获取插件外的值，因此您可以随意使用它们（例如将它们存储在本地存储中）。

＆＃13;

$(function() {
  $.fn.timeTables = function(config) {
    // prepare variables with jQuery objects, based on selectors provided in config object
    var numberOfSubjectsTextBox = $(config.numberOfSubjects);
    var subjectsDiv = $(config.subjects);
    var facultiesDiv = $(config.faculties);
    var prepareButton = $(config.prepareButton);
    var numberOfSubjects = 0;

    prepareButton.click(function() {
      // read number of subjects from the textbox - some validation should be added here
      numberOfSubjects = +numberOfSubjectsTextBox.val();
      
      // clear subjects and faculties div from any text boxes there
      subjectsDiv.empty();
      facultiesDiv.empty();

      // create new text boxes for each subject and append them to proper div
      // TODO: these inputs could be stored in arrays and used later
      for (var i = 0; i < numberOfSubjects; i++) {
        $('<input type="text" placeholder="Subject ' + i + '" />').appendTo(subjectsDiv);
        $('<input type="text" placeholder="Faculty ' + i + '" />').appendTo(facultiesDiv);
      }
    });

    function generate() {
      // prepare result array
      var result = [];
      
      // get all text boxes from subjects and faculties divs
      var subjectTextBoxes = subjectsDiv.find('input');
      var facultiesTextBoxes = facultiesDiv.find('input');

      // read subject and faculty for each subject - numberOfSubjects variable stores proper value
      for (var i = 0; i < numberOfSubjects; i++) {
        result.push({
          subject: $(subjectTextBoxes[i]).val(),
          faculty: $(facultiesTextBoxes[i]).val()
        });
      }

      return result;
    }

    // expose generate function outside the plugin
    return {
      generate: generate
    };
  };

  var tt = $('#container').timeTables({
    numberOfSubjects: '#numberOfSubjects',
    subjects: '#subjects',
    faculties: '#faculties',
    prepareButton: '#prepare'
  });

  $('#generate').click(function() {
    // generate result and 'print' it to result div
    var times = tt.generate();
    var result = $('#result');
    result.empty();
    
    for (var i = 0; i < times.length; i++) {
      $('<div>' + times[i].subject + ': ' + times[i].faculty + '</div>').appendTo(result);
    }
  });
});

＆＃13;

#content div {
  float: left;
}

#content div input {
  display: block;
}

#footer {
  clear: both;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="container">
  <div id="header">
    <input type="text" id="numberOfSubjects" placeholder="Number of subjects" />
    <button id="prepare">
      Prepare
    </button>
  </div>
  <div id="content">
    <div id="subjects">
    </div>
    <div id="faculties">
    </div>
  </div>
</div>
<div id="footer">
  <button id="generate">Generate</button>
  <div id="result">
  </div>
</div>

＆＃13;

将动态生成的文本框中的值存储到数组

1 个答案: