javascript - jquery 文件树高亮选中

Question

我正在实现一个 jQueryFileTree ( http://www.abeautifulsite.net/jquery-file-tree/ ) 作为文件浏览器，并希望用户单击的每个文件或目录都保持突出显示。我知道这可以使用简单的 JavaScript 或 CSS 来完成，但我对源代码的理解不够深入，无法知道如何或在何处实现突出显示。谁能指出我正确的方向？

Answer 1

click好吧，您可以使用处理程序捕获单击并使用addClass.

$('.thing-i-will-click-on').click(function() {
  $(this).addClass('selected');
});

您也可以使用类似的方法删除一个类。

$('.selected').removeClass('selected');

将这两件事结合起来应该会给你想要的结果。

Answer 2

所以经过一点修补后，我让它工作了！

首先，您必须进入 jqueryFileTree.js 并从中修改第 80 行：

h($(this).attr('rel'));

至：

h($(this));

这将返回被点击的对象而不是文件名。要在 .fileTree 的定义中获取函数（文件）中的文件名，您必须使用：

file.attr('rel');

现在您有了对象，您可以在函数（文件）中使用它来突出显示您的代码。（选择的是我创建的改变背景颜色的 CSS 类）

$(".selected").removeClass('selected');
file.addClass('selected');

Answer 3

$('#your_filelist_id').fileTree({
  root: '/',
  script: '/connectors/jqueryFileTree.php'
}, function(file) {
  var flist = $('#your_filelist_id a[rel="' + file + '"]');
  if(flist.hasClass('selected')) {
    flist.removeClass('selected');
  }
  else {
    flist.addClass('selected');
  }
});