显示文件类型的图标

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>

   <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>

<script>

   var link = document.getElementsByClassName('link');

   for(let el of link )

   {

   console.log(el.innerHTML.split('.')[1]);

   }

</script>

Answer 2

问题是因为您附加到所有.link--file元素。相反，您需要附加到循环迭代中的特定一个。

此外，您应该使用each()循环遍历 jQuery 对象中的一组元素，而不是map(). 后者旨在用于从集合构建数组。

最后，您可以通过使用一个对象来存储您要使用的图标类名，从而使图标查找逻辑更具可扩展性。

let iconLookup = {

  png: 'fa-circle',

  pdf: 'fa-square-o',

  jpg: 'fa-circle-o'

}

jQuery($ => {

  $('.link--file').each((i, el) => {

    let $link = $(el);

    let ext = $link.data('f').split('.').pop();

    if (iconLookup.hasOwnProperty(ext)) {

      $link.append(`<i class="fa ${iconLookup[ext]}"></i>`);

    }

  });

});

<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>

  <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 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>