Question

按下父窗口上的按钮时，模态窗口会向下滑动。模态窗口有两个文本字段。用户完成输入文本后，按下“添加”按钮。我希望添加按钮在html中填写无序列表。我该如何将其传递给父母？

<div class="modal fade" id="newTask" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Add a New Task</h4>
      </div>
      <div class="modal-body">
        <form>
          <input class="textField" type="text" placeholder="Enter the Task here."></input>
          <input class="textField datepicker dueDate" id="dpd1" type="text" placeholder="Select Date">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="addListItem('list')" id="addTask">Add Task</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


$('.modal form').on('#newTask', function addListItem(listID){
var input = $('input[type=text]');
var str = '<li><table id="todoTable" border="1" cellspacing="2" cellpadding="3"><tr><td> <input type="checkbox" class="checkbox">  </input> </td><td> <input type="text" class="todo-data">  </input> </td><td> <input type="button" class = "image" value="X">  </input> </td></tr><tr><td> <input type="checkbox" class="no-show">  </input> </td> <script>$function(){$(".datepicker").datepicker();});</script> <td> <input type="text" id="datepicker" class = "datepicker">  </input> </td></tr></table></li>';
$('.todo-list').append(str);
input.val('');
$(this).parent().hide();
return false;

}）;

Answer 1

正如第一条评论所提到的，您需要做的就是将其附加到列表中。我不确定你对哪一部分感到困惑，所以我把一个简单的例子放在一起，以尽可能最简单的方式完成上述所有工作。链接到jsfiddle如下：

http://jsfiddle.net/Qw2VY/2/

这里是javascript代码转载：

$('button').on('click', function(){
  $('.modal').toggle()
});

$('.modal form').on('submit', function(){
    var input = $('input[type=text]');
    $('ul').append('<li>'+ input.val() + '</li>');
    input.val('');
    $(this).parent().hide();
    return false;
});

第一次点击功能很简单，它只是在点击按钮时打开或关闭模态。第二部分是大部分行动发生的地方。当提交模态中的表单时，这是逐行的：

抓取用户输入文本的输入字段
将该字段的值添加到我们的列表中，由列表项
清除文本字段，以便下次需要添加项目时将其清空
关闭模态
通过返回false

还有更多可以在这里完成的工作，例如添加取消按钮以摆脱模式，如果你不想要，验证以确保用户实际放入你想要的那种文本等等但是我假设你可以把这些东西弄清楚，这很简单。如果没有随意评论和询问，我们可以过去。

编辑：作者在问题中添加了代码

好像你正在找人为你写一个复制粘贴的答案，正如我在评论中提到的那样，我不愿意这样做。但我很乐意通过您的代码并进行编辑，以便您可以学习。让我们直接进入它。

首先，我们来看一下html。首先，不知道你正在做什么用javascript附加所有html。让我们把它放在页面上开始。我从脚本中取出了html并修复了一些错误（未关闭的标签，间距问题，自动关闭输入标签等）。

<!-- table up top here -->

<table id="todoTable" border="1" cellspacing="2" cellpadding="3">
  <tr>
    <td><input type="checkbox" class="checkbox" /></td>
    <td><input type="text" class="todo-data" /></td>
    <td><input type="button" class="image" value="X" /></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="no-show" /></td>
    <td><input type="text" id="datepicker" class="datepicker" /></td>
  </tr>
</table>

<!-- we need a button to click that makes the modal show up -->

<button class='triggerModal'>open modal</button>

<!-- modal html here (abbreviated) -->

<div id='newTask'> ... </div>

<!-- now we can start on the script -->

<script>

  // first, we need to make sure the modal shows up when you
  // click the button
  $('.triggerModal').on('click', function(){
    $('#newTask').modal()
  });

  // now, after the modal is up, we need to respond to the form submission.
  // i'll let you fill this in, based on my example. If this is still confusing
  // to you, you need to go back and review javascript and jquery basics. if this
  // is the case let me know and I'd be happy to suggest resources
</script>

编辑2：作者表示他们并不真正了解html，css和javascript如何工作的基础知识，所以虽然这个答案可以解决问题，但它超出了范围。以下是我建议开始使用html，css和javascript基础知识的一些资源：

HTML： http://teamtreehouse.com/library/websites/html
CSS： http://teamtreehouse.com/library/websites/css-foundations-2
JS基础知识： http://teamtreehouse.com/library/websites/javascript-foundations
jQuery Basics： http://www.codeschool.com/courses/try-jquery

如何将文本字段从模态传递给父级？

1 个答案: