3

我有这个很棒的字幕功能。如果我填写 alt 属性，它会创建一个标题，并将 data 属性作为标题的链接。效果很好。

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

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

我不知道让 jQuery 检查是否有 alt。我希望 ALT 属性控制是否显示 alt 和数据信息。

这是我目前拥有的：

查询：

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 属性，如果有，显示带有链接和文本的标题，如果没有，隐藏标题。

谢谢！

4

1 回答 1

3 
$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 checks 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) {
    // ...
}
于 2012-06-16T14:59:00.737 回答