Question

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

问题是，如果我在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) {
    // ...
}

显示div IF图像具有ALT属性

1 个答案: