显示文件类型的图标

Question

我无法为不同的文件类型显示不同的图标。我的代码重复了图标。有什么帮助吗？

$('document').ready(function() {

  var icon;

  var arr = $.map($('.link--file'), function(el) {

    var ext = $(el).data('f').split('.').pop();

    if (ext === 'png') {

      img = '<i class="fa fa-circle></i>';

      $('.link--file').append(img)

    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

  <a href="#" data-f="2134.png" class="link link--file">filename1.png</a>

  <a href="#" data-f="432543.png" class="link link--file">filename2.png</a>

  <a href="#" data-f="345.pdf" class="link link--file">filename2.pdf</a>

  <a href="#" data-f="54445.jpg" class="link link--file">filename1.jpg</a>

</div>

Answer 1

尝试这个<div>&nbsp; &nbsp;<a href="#" data-f="2134.png" class="link link--file">filename1.png</a>&nbsp; &nbsp;<a href="#" data-f="432543.png" class="link link--file">filename2.png</a>&nbsp; &nbsp;<a href="#" data-f="345.pdf" class="link link--file">filename2.pdf</a>&nbsp; &nbsp;<a href="#" data-f="54445.jpg" class="link link--file">filename1.jpg</a></div><script>&nbsp; &nbsp;var link = document.getElementsByClassName('link');&nbsp; &nbsp;for(let el of link )&nbsp; &nbsp;{&nbsp; &nbsp;console.log(el.innerHTML.split('.')[1]);&nbsp; &nbsp;}</script>

Answer 2

问题是因为您附加到所有.link--file元素。相反，您需要附加到循环迭代中的特定一个。此外，您应该使用each()循环遍历 jQuery 对象中的一组元素，而不是map(). 后者旨在用于从集合构建数组。最后，您可以通过使用一个对象来存储您要使用的图标类名，从而使图标查找逻辑更具可扩展性。let iconLookup = {&nbsp; png: 'fa-circle',&nbsp; pdf: 'fa-square-o',&nbsp; jpg: 'fa-circle-o'}jQuery($ => {&nbsp; $('.link--file').each((i, el) => {&nbsp; &nbsp; let $link = $(el);&nbsp; &nbsp; let ext = $link.data('f').split('.').pop();&nbsp; &nbsp; if (iconLookup.hasOwnProperty(ext)) {&nbsp; &nbsp; &nbsp; $link.append(`<i class="fa ${iconLookup[ext]}"></i>`);&nbsp; &nbsp; }&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"><div>&nbsp; <a href="#" data-f="2134.png" class="link link--file">filename1.png</a>&nbsp; <a href="#" data-f="432543.png" class="link link--file">filename2.png</a>&nbsp; <a href="#" data-f="345.pdf" class="link link--file">filename2.pdf</a>&nbsp; <a href="#" data-f="54445.jpg" class="link link--file">filename1.jpg</a></div>

Answer 3

您可以使用jQuery.each() 来执行此操作。这样您就可以通过访问循环中的当前元素this。$('document').ready(function() {  $('div .link--file').each(function() {    if(this.dataset.f.includes('.png')) {     $(this).append('<i class="fa fa-circle"></i>')    }  });});<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>   <a href="#" data-f="2134.png" class="link link--file">filename1.png</a>   <a href="#" data-f="432543.png" class="link link--file">filename2.png</a>   <a href="#" data-f="345.pdf" class="link link--file">filename2.pdf</a>   <a href="#" data-f="54445.jpg" class="link link--file">filename1.jpg</a></div>