3

私は世界的に素晴らしいこのキャプション機能を持っています。alt 属性を入力すると、キャプションが作成され、 data 属性がキャプションのリンクとして作成されます。よく働く。

問題は、alt または data 属性に何もない場合でも、div が表示されることです。私のCSSでわかるように、リンクにはパディングのある背景があるため、これは問題です.dataまたはalt属性がない場合、空白のdivが黒い背景で表示されます.

関数を変更して、IF画像にaltがあり、表示がデータ情報と一緒にキャプションを作成し、それ以外の場合は.caption全体を表示しないようにしたいと考えています。

altがあるかどうかをjQueryにチェックさせる方法がわかりません。ALT 属性で、ALT とデータ情報を表示するかどうかを制御します。

これが私が現在持っているものです：

Jクエリ:

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">

^^ 2 番目の画像では、キャプション ボックスがレンダリングされ、空白のリンクがパディングされています。

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;
}

まとめとして、画像に alt 属性があるかどうかを確認する IF ステートメントを使用して関数を変更し、ある場合はリンクとテキストを含むキャプションを表示し、ない場合はキャプションを非表示にします。

ありがとう！

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 のチェック

これは、チェックを行う別の方法を示唆していますが、より長いコードが必要かどうかはわかりません。

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