首頁猿問顯示文件類型的圖標

顯示文件類型的圖標

JavaScript

叮當貓咪 2023-05-19 15:12:06

我無法為不同的文件類型顯示不同的圖標。我的代碼重復了圖標。有什么幫助嗎？$('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>

查看完整描述

3 回答

守著星空守著你

TA貢獻1799條經驗獲得超8個贊

嘗試這個

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

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

for(let el of link )

{

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

}

</script>

反對回復 2023-05-19

神不在的星期二

TA貢獻1963條經驗獲得超6個贊

問題是因為您附加到所有.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>`);

}

});

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

反對回復 2023-05-19

鴻蒙傳說

TA貢獻1865條經驗獲得超7個贊

您可以使用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>')

? ? }

? });

});

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

反對回復 2023-05-19

3 回答
0 關注
204 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

顯示文件類型的圖標

顯示文件類型的圖標

3 回答

添加回答