类似于在 jQuery 中浏览文件的东西

Question

我想创建一个页面，比如浏览一个文件。现在我有这个问题： 我在此页面中有一些链接，它们是文件夹和文件，以及一个“打开”按钮。我希望当用户按下一个键时，选择以该字符开头的第一个链接（文件/文件夹）。我还希望当用户双击每个链接或单击每个链接并按“打开”按钮时，我会显示所选文件夹的内容，或者如果这是文件，我希望关闭窗口。现在我想知道如何理解单击“打开”按钮时，选择了哪个项目？

<script type="text/javascript">
        function func(id){
            var label = $('<label/>').text(id).appendTo($('#div_for_labels'));
            $('#div_show').html('waiting...').load('learning/?ajax=true&path='+id);
        }

        $('openButton').click(function(e){
            e.preventDefault();
            ???
        })
    </script>


            <div id="div_for_labels"></div>
            <div id="div_show">
            {% for f_name, f_type in list %}
                    {% if f_type == 'folder' %}
                        <p><a ondblclick="func(this.id)" id="{{ f_name }}" class="res"><img src="/media/img/folder.jpeg">{{ f_name }}</a></p>
                    {% else %}
                        <p><a ondblclick="func(this.id)" id="{{ f_name }}" class="res"><img src="/media/img/file.jpeg">{{ f_name }}</a></p>
                    {% endif %}
            {% endfor %}
            </div>
            <div>
                <input type="submit" id="openButton" value="Open">
            </div>

我不知道我应该在“打开”按钮上写什么脚本来了解选择了哪个项目并将其 id 发送到我的视图？

编辑：
我的意见.py：

def learning(request):
    if request.is_ajax():
            if 'path' in request.GET:
                # receives list
                return render_to_response("path.html",{'list': list})
            else:
                # receives list
                return render_to_response("learningPath.html",{'list': list})

第一次进入“learning.html”页面，其中包含标签的 div 和“打开”按钮。其他时候，由于防止标签和“打开”按钮重复 div，它转到“path.html”，其中仅包含：

{% for f_name, f_type in list %}
                        {% if f_type == 'folder' %}
                            <p><a ondblclick="func(this.id)" id="{{ f_name }}" class="res"><img src="/media/img/folder.jpeg">{{ f_name }}</a></p>
                        {% else %}
                            <p><a ondblclick="func(this.id)" id="{{ f_name }}" class="res"><img src="/media/img/file.jpeg">{{ f_name }}</a></p>
                        {% endif %}
                {% endfor %}

Answer 1

不要混合使用 HTML 和 JavaScript，只要用 jQuery 做所有事情。

<script type="text/javascript">
$(function() {
   var _loadFile = function(file) {
     if (file.type == 'folder') {
       var label = $('<label/>').text(file.name).appendTo($('#div_for_labels'));
       $('#div_show').html('waiting...').load('learning/?ajax=true&path='+file.name);
     } else {
        // load file here
     }
   };

   var _selectedFile = null;  // nothing selected;

   // using '#div_show' as relative parent, fetch all 'a.res' elements...
   $('a.res', $('#div_show')).live({  // bind now and any future elements
       dblclick: function() {
           var $this = $(this);
           _loadFile($this.data('file'));
       },
       click: function() {
           var $this = $(this);
           $('#div_show a.res.file-selected').removeClass('file-selected'); // remove old selection (if any)
           $this.addClass('file-selected');

           _selectedFile = $this.data('file');
       }
   });

   $('openButton').click(function(e){
      e.preventDefault();

      if (_selectedFile) {
         _loadFile(_selectedFile);
      } else {
         alert("No file selected");
      }
   })
});
</script>

<div id="div_for_labels"></div>
<div id="div_show">
   {% for f_name, f_type in list %}
       <p><a data-file="{'name':'{{ f_name }}', 'type':'{{ f_type }}'}" class="res"><img src="/media/img/{{ f_type }}.jpeg">{{ f_name }}</a></p>
   {% endfor %}
</div>
<div>
   <input type="submit" id="openButton" value="Open">
</div>

注意：我假设f_type 是folder 或file。

** 编辑 **

你的 path.html 文件应该只包含上面提到的 HTML 块：

{% for f_name, f_type in list %}
   <p><a data-file="{'name':'{{ f_name }}', 'type':'{{ f_type }}'}" class="res"><img src="/media/img/{{ f_type }}.jpeg">{{ f_name }}</a></p>
{% endfor %}