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反復シーケンスでcurrent を参照するために使用する必要があり<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) );

を削除したことに注意してください。次のdiv.next()をターゲットにしていました。

于 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 に答える