Question

我正在尝试使用JavaScript逐级获取目录列表我有这个paths数组作为输入。

var _paths = [];
_paths.push("meta1/meta2/test/home/myself/hi.jpg");
_paths.push("meta1/meta2/test/home/myself/hi1.jpg");
_paths.push("meta1/meta2/test/home/myself/hi2.jpg");
_paths.push("meta1/meta2/test/work/she/100.jpg");
_paths.push("meta1/meta2/test/work/she/110.jpg");
_paths.push("meta1/meta2/test/work/she/120.jpg");
_paths.push("meta1/meta2/test/work/hard/soft/she/120.jpg");
_paths.push("meta1/meta2/test/work/hard/soft/she/121.jpg");
_paths.push("meta1/meta2/test/work/she/220.jpg");

我希望将“test”作为输出，可以点击。单击“测试”后，应将其替换为“home”和“work”。点击“home” - “我自己”，点击“工作” - “硬”和“她”。

我写了这个：
CodepenCode

仅在点击“测试”时才有效。

Answer 1

在绘制目录后，只需重新绑定侦听器即可。你只绑定它们一次，因此它们只能工作一次。

将绑定功能包装到命名函数中：

function bindListeners(){
  $('.sub').click(function() {
    word = $(this).text();
    filteredArr = findString(_paths, word);
    drawList(filteredArr, word);
  });
}

并在drawList：

结束时调用它

var drawList = function (paths, word) {
  var folders = getFolders(paths, word);
  if (folders.length > 0) {
    $('.canvas').html('');
    for (i = 0; i < folders.length; i++) {
      $('.canvas').append("<div class='sub'>" + folders[i] + "</div><br />");
    }
  }
  bindListeners();
}

Demo

Answer 2

如果有人对构建数据结构感到好奇：

var pipeline = usersCollection.Aggregate()
    .Unwind<OriginalType, NewResultType>(....

在JavaScript中多次绑定事件侦听器

2 个答案: