jquery 文件树高亮选中

Posted 2023-03-06

【中文标题】jquery 文件树高亮选中

【英文标题】：jquery file tree highlight selected

【发布时间】：2015-07-06 17:39:41

【问题描述】：

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

【参考方案1】：

好吧，您可以使用click 处理程序捕获一次点击，并使用addClass 添加一个类。

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

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

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

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

【讨论】：

对。但是如果你熟悉 jquery filetree 源代码，不清楚在哪里添加点击函数或'selected'类

@Eroth 您没有将其添加到 FileTree 源中。您可以在自己的代码中运行它。

【参考方案2】：

所以经过一番修改后，我让它工作了！

首先你必须进入 jqueryFileTree.js 并从这里修改第 80 行：

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

到：

h($(this));

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

file.attr('rel');

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

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

【参考方案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');
  
);