Question

我正在尝试更改列表样式图片，具体取决于iframe中我的链接上的文件扩展名。下面的代码是我到目前为止的代码，它将pdf图标应用于iframe中的所有内容，而不仅仅是pdf中的代码。我在这做错了什么？希望你能帮忙！

$(document).ready( function () {
$( "iframe#mframe" ).load(function () {
    if($('a[href$=".pdf"]')) {
        $('iframe#mframe').contents().find( "li" ).css("list-style-image" , "url('/wp-content/themes/mintranet/img/icons/pdf_icon.gif')" );
    }
    else if ($('a[href$=".docx"]')) {
        $('iframe#mframe').contents().find( "li" ).css("list-style-image" , "url('/wp-content/themes/mintranet/img/icons/docx_icon.png')" );
    }
    else if ($('a[href$=".wmv"]')) {
        $('iframe#mframe').contents().find( "li" ).css("list-style-image" , "url('/wp-content/themes/mintranet/img/icons/wmv_icon.png')" );
    }
});

}）;

谢谢你们，总是感谢你的帮助！

编辑：虽然我正在使用Ecropolis的答案，但我找到了另一种方法：

        $('iframe#mframe').contents().find( 'li a[href*=".pdf"]' ).before('<img src="/wp-content/themes/mintranet/img/icons/pdf_icon.gif" />');

它的工作完美无缺，除了在这些文件夹中有数百种文件类型的情况下它不是最具语义性的方式！尽管如此，我的问题已得到解答，为此我感谢所有参与其中的人！一切顺利！

Answer 1

这样的事情怎么样？将文件类型的字符串重用为正确图像的路径。无论哪种方式，我认为.each（）函数是您解决问题所需要的。你有if语句，每个语句中的你的选择器总能找到相同的元素。

$( "iframe#mframe a" ).each(function( index ) {
  var type = $(this).attr('src').slice( -3 );
  $(this).css("list-style-image" , "url('/wp-content/themes/mintranet/img/icons/"+type+"_icon.gif')" );
});

Answer 2

虽然你已经接受了答案，但我认为我会提供另一种方法：

$('iframe#mframe li').css('list-style-image', function(){
    return "url('/wp-content/themes/mintranet/img/icons/" + $(this).find('a').attr('href').split('.').pop() + "_icon.gif')"
});

参考文献：

JavaScript的：
- Array.prototype.pop()。
- String.prototype.split()。
jQuery的：
- attr()。
- css()。
- find()。

根据文件扩展名更改列表样式类型的图像？

2 个答案: