显示div如果图像有ALT属性

Question

我有这个标题功能，世界很棒。如果我填写alt属性，则会创建标题，并将数据属性作为标题的链接。很棒。

问题是如果我在alt或data属性中没有任何东西，div仍然出现。这是一个问题，因为正如你在我的CSS中看到的，链接有一个带填充的背景，所以没有数据或alt属性，一个空白的div会出现黑色背景。

我希望能够改变我的功能，说IF图像有alt，显示与数据信息一起创建标题，否则，显示整个.caption为none。

我不知道有jQuery检查，看看有没有alt。我想要ALT属性来控制是否显示alt和数据信息。

这是我目前有：

的Jquery：

function imageCaption() { 
    var $image =$('img'); 

    $image.wrap('<div class="box"></div>'); 

    $image.each(function() { 
     var caption = this.alt; 
     var link = $(this).attr('data'); 
     $(this).after('<div class="caption"><a href="'+ link +'" target="blank">'+ caption +'</a></div>'); 
    }); 
} 

HTML：

<img src="IMAGE URL" alt="This is my first image" data="http://www.google.com"> 
<img src="IMAGE URL"> 

^^第二个形象的标题框渲染，用填充空白链接。

CSS：

#photoWrapper .caption { 
    position: absolute; 
    bottom: 10px; 
    right: 5px; 
    text-transform: uppercase; 
    font-size: 10px; 
} 

#photoWrapper .caption a { 
    text-decoration: none; 
    color: #F1F1F1; 
    padding: 5px 10px 5px 10px; 
    background: rgba(0,0,0,0.7); 
} 

#photoWrapper .caption a:hover { 
    background: rgba(0,0,0,0.9); 
    color: #ff6666; 
} 

所以把它包起来，只是希望改变我的功能使用IF语句，看起来，看看图像有alt属性，如果是这样，有链接显示标题和文字，如果没有，隐藏标题。

谢谢！

Answer 1

$image.each(function() { 
    if($(this).attr("alt")) { 
     // The image has an attribute do your thing 
     var caption = this.alt; 
     var link = $(this).attr('data'); 
     $(this).after('<div class="caption"><a href="'+ link +'" target="blank">'+ caption +'</a></div>'); 

    }  
}); 

也有同样的问题在这里：jQuery hasAttr checking to see if there is an attribute on an element

这表明一种替代方法，使检查不过我不知道需要较长的代码。

var attr = $(this).attr('name'); 

// For some browsers, `attr` is undefined; for others, 
// `attr` is false. Check for both. 
if (typeof attr !== 'undefined' && attr !== false) { 
    // ... 
}