jquery文件树高亮显示已选中

jquery file tree highlight selected

本文关键字：显示 高亮 文件 jquery      更新时间：2023-09-26

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

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

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

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

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

把这两件事结合起来应该会得到你想要的结果。

所以经过一点修改，我开始工作了！

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

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

至：

h($(this));

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

file.attr('rel');

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

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

$('#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');
  }
});
相关文章：