0

JQueryを使用して画像が利用可能かどうかを確認し、含まれていない場合はそれを含むdivをdisplay:noneに設定し、同じセクション内の別のdivをdisplay:inlineに設定します。

私は JavaScript の第一人者ではありません。このコードが間違っていることは知っていますが、修正を提案できますか?

これは、私の HTML と CSS、およびこれまでに使用した JQuery の例です。

HTML:

<div class="content" >
    <div class="image"> <img src="images/IMG_0711a.JPG" alt="image"> </div>
    <div class="noimage"> </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="content" >
    <div class="image"> <img src="" alt="no image src"> </div>
    <div class="noimage"> </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="content" >
    <div class="image"> <img src="images/IMG_0711a.JPG" alt="image"> </div>
    <div class="noimage"> </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS:

.noimage    {display:none;}

JQuery:

$(".content").each(function()       //for each class 'content'
    {      
    var $selection = $(this);
    if ($('.content .image img').attr('src') == '')    //if inner div called 'image' has image url equal to null
        {
        $".content .image".remove();            //hide the inner div 'image'
        $".content .noimage".show();            //show the inner div 'noimage'
        $".content .noimage".text("my text");   //add text to inner div 'noimage'
        }
    }
4

1 に答える 1

1

試す

$(".content").each(function()  {      
    var $selection = $(this);
    if (!$('img', $selection).attr('src')) {
        $(".image", $selection).remove();            //hide the inner div 'image'
        $(".noimage", $selection).show().text("my text");            //show the inner div 'noimage'
    }
})

デモ:フィドル

于 2013-04-30T10:21:26.103 に答える