Question

我有一个文件目录，每个文件都有很少的缩略图，表明它的文件类型。但是，我希望缩略图对某些文件更具体。

例如，我有一个Sketch-File，一个Photoshop文件，一个JPG和一个PNG。 mime类型算法将所有这四个文件检测为图像。但是，我想替换sketch-和psd文件的图像缩略图。

现在，我想更改与文件扩展名相关的子div的'style'属性。如果data-file-attribute的扩展名为.psd＆gt;然后将div＃thumbnail的style-attribute更改为... / filetypes / psd.svg。如果data-file-attribute是.sketch＆gt; div #tignails的stle-attribute应为... / filetypes / sketch.svg。

但是，PNG和JPG的缩略图应保持不变。

如何做到这一点？有任何想法吗？我是jQuery的新手。

我的HTML看起来像这样：

<tr data-file="filename.png" data-mime="application/octet-stream">
  <td class="td_01">
    <a class="name">
      <div class="thumbnail" style="background-image:url(/img/filetypes/image.svg)"></div>
    </a>
  </td>
</tr>

<tr data-file="filename.jpg" data-mime="application/octet-stream">
  <td class="td_01">
    <a class="name">
      <div class="thumbnail" style="background-image:url(/img/filetypes/image.svg)"></div>
    </a>
  </td>
</tr>

<tr data-file="filename.psd" data-mime="application/octet-stream">
  <td class="td_01">
    <a class="name">
      <div class="thumbnail" style="background-image:url(/img/filetypes/image.svg)"></div>
    </a>
  </td>
</tr>

<tr data-file="filename.sketch" data-mime="application/octet-stream">
  <td class="td_01">
    <a class="name">
      <div class="thumbnail" style="background-image:url(/img/filetypes/image.svg)"></div>
    </a>
  </td>
</tr>

Answer 1

这可以帮到你：

它查找文档中的所有tr。

对于每个tr，它会尝试查找.psd或.sketch。如果找到其中一个，则修改bakcground图像。如果没有，它什么都不做。

编辑：它是用普通的js编写的，它不使用JQuery。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<table>
		<tr data-file="filename.png" data-mime="application/octet-stream">
		  <td class="td_01">
		    <a class="name">
		      <div class="thumbnail" style="background-image:url(/img/filetypes/image.svg)"></div>
		    </a>
		  </td>
		</tr>
		
		<tr data-file="filename.jpg" data-mime="application/octet-stream">
		  <td class="td_01">
		    <a class="name">
		      <div class="thumbnail" style="background-image:url(/img/filetypes/image.svg)"></div>
		    </a>
		  </td>
		</tr>
		
		<tr data-file="filename.psd" data-mime="application/octet-stream">
		  <td class="td_01">
		    <a class="name">
		      <div class="thumbnail" style="background-image:url(/img/filetypes/image.svg)"></div>
		    </a>
		  </td>
		</tr>
		
		<tr data-file="filename.sketch" data-mime="application/octet-stream">
		  <td class="td_01">
		    <a class="name">
		      <div class="thumbnail" style="background-image:url(/img/filetypes/image.svg)"></div>
		    </a>
		  </td>
		</tr>
	</table>
	<script type="text/javascript">
		let tr = document.querySelectorAll('tr');
		for (var i = 0; i < tr.length; i++) {
			let t = tr[i];
			if(t.dataset.file.indexOf('.psd') >= 0){
				t.querySelector('div').style.backgroundImage = "url(img/filetypes/psd.svg)";
			}else if(t.dataset.file.indexOf('.sketch') >= 0){
				t.querySelector('div').style.backgroundImage = "url(img/filetypes/sketch.svg)";
			}	
		}
	</script>
</body>
</html>

使用jquery

1 个答案: