第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

顯示文件類型的圖標(biāo)

顯示文件類型的圖標(biāo)

叮當(dāng)貓咪 2023-05-19 15:12:06
我無(wú)法為不同的文件類型顯示不同的圖標(biāo)。我的代碼重復(fù)了圖標(biāo)。有什么幫助嗎？$('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貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超8個(gè)贊

嘗試這個(gè)


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


查看完整回答
反對(duì) 回復(fù) 2023-05-19
?
神不在的星期二

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

問(wèn)題是因?yàn)槟郊拥剿?link--file元素。相反，您需要附加到循環(huán)迭代中的特定一個(gè)。


此外，您應(yīng)該使用each()循環(huán)遍歷 jQuery 對(duì)象中的一組元素，而不是map(). 后者旨在用于從集合構(gòu)建數(shù)組。


最后，您可以通過(guò)使用一個(gè)對(duì)象來(lái)存儲(chǔ)您要使用的圖標(biāo)類名，從而使圖標(biāo)查找邏輯更具可擴(kuò)展性。


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>


查看完整回答
反對(duì) 回復(fù) 2023-05-19
?
鴻蒙傳說(shuō)

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

您可以使用jQuery.each()?來(lái)執(zhí)行此操作。這樣您就可以通過(guò)訪問(wèn)循環(huán)中的當(dāng)前元素this。

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

? $('div .link--file').each(function() {

? ? if(this.dataset.f.includes('.png')) {

? ? ?$(this).append('<i class="fa fa-circle"></i>')

? ? }

? });

});

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



查看完整回答
反對(duì) 回復(fù) 2023-05-19
  • 3 回答
  • 0 關(guān)注
  • 214 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)