jQuery条件应用于多个项目答案

【问题标题】：jQuery condition applied to multiple itemsjQuery条件应用于多个项目
【发布时间】：2012-08-12 05:06:20
【问题描述】：

我正在尝试 #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>

【问题讨论】：

^即html id 应该是唯一的 :)

标签： jquery if-statement conditional each

【解决方案1】：

您需要在迭代序列中使用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()，它针对的是 next div。

【讨论】：

不会工作.. $(this).next().. 你需要在 div 内部遍历才能获得 #indicator div.. 加上 $("div") 将抓取内部 div
@nbrooks 还有一件事.. else 不允许条件.. 你必须为此使用else if

【解决方案2】：

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

var fileName =$(this).find('img.myimg').attr('src');

【讨论】：

【解决方案3】：

这里有一个更短的方法

$(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/

【讨论】：

哇，太棒了，另外，我发现了这个：cool-javascripts.com/jquery/… 但是，再次感谢您！我有很多基础知识，但我对一些事情还是陌生的。但我更喜欢这个解决方案。
@namretiolnave 使用 jQuery 只会变得更有趣 :)
两者：$(this).find('div').addClass('is'+fileExtension.replace('.','')); AND if(fileExtension) $(this).find("#indicator").addClass("is" + fileExtension.slice(1) );会工作 - 有谁知道为什么 jQuery 不喜欢“if”和“else”条件？
@namretiolnave 是的。你有一个if/else 条件。else 不应该有任何条件。您应该按照您的设置方式使用if/else if