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发送到我的视图？谢谢你的帮助。

编辑：我的views.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 %}

有点像在jquery中浏览文件

1 个答案: