0

我正在尝试 #1 获取文件扩展名，然后一旦我有了 - 有条件地显示一个相应的图标来显示它是什么文件类型。我得到它来检测扩展，我第一次让它工作，我不能让它对每个项目进行不同的处理。

这是代码：

   <html>
<head>
<title>check ext</title>



    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script>
$(document).ready(function(){


$("div").each(function(){ 
var fileName =$('div img.myimg').attr('src')
var fileExtension = fileName.substring(fileName.lastIndexOf('.') );



if (fileExtension==".jpg")
{
   $(this).next().find("#indicator").addClass("isjpg");
}
else (fileExtension==".gif")
{
   $(this).next().find("#indicator").addClass("isgif");

}


 });



 });

</script>

<style>
.isjpg{background-image:url('images/jpg.gif');}
.isgif{background-image:url('images/gif.gif');}

#indicator{width:100px;height:100px;border:solid;border-width:1px;}
</style>



</head>
<body>
<div>
<img class="myimg" src="images/carthumb.jpg"/><div id="indicator"></div>
</div>

<div>
<img class="myimg" src="images/plus.gif"/><div id="indicator"></div>
</div>
<div>
<img class="myimg" src="images/carthumb.jpg"/><div id="indicator"></div>
</div>

</body>

</html>
4

3 回答 3

3

您需要使用this引用<div>迭代序列中的当前，否则返回的文件名将始终是第一个 div 中的图像所指示的文件名：

$(document).ready(function() {
    $("body > div").each(function() {
        var fileName = $(this).find('img.myimg').attr('src');
        var fileExtension = fileName.substring(fileName.lastIndexOf('.'));

        if (fileExtension == ".jpg") {
            $(this).find("#indicator").addClass("isjpg");
        }
        else if (fileExtension == ".gif") {
            $(this).find("#indicator").addClass("isgif");
        }
    });
});

即改变var fileName =$('div img.myimg').attr('src')对此var fileName =$(this).find('img.myimg').attr('src');

为了聪明并避免检查每一个，你可以这样做（替换你的if/else）：

if(fileExtension)
    $(this).find("#indicator").addClass("is" + fileExtension.slice(1) );

请注意，我删除了.next()，它针对的是下一个div。

于 2012-08-15T21:01:11.110 回答
2

尝试更改以下行以引用正确的对象。

var fileName =$(this).find('img.myimg').attr('src');
于 2012-08-15T21:02:10.613 回答
2

这是一个更短的方法

$(document).ready(function() {
    $("body > div").each(function() {  // <-- get div's that are direct descendants of body
        var fileName = $(this).find('.myimg').attr('src'); // <-- find img and get src   
        var fileExtension = fileName.substring(fileName.lastIndexOf('.'));  // <-- get img file type
        $(this).find('div').addClass('is'+fileExtension.replace('.','')); // add class 'is' + file type without period
        // since there is only one div you can just look for the div.. 
        // ID's should be unique.. you can change it to a class  or data- attribute if you 
        // really need more than one
    });
});​

http://jsfiddle.net/wirey00/4L7wB/

于 2012-08-15T21:21:00.450 回答