Как правильно создать условие?

596

30 июля 2017, 10:50

Здравствуйте! Подскажите, пожалуйста, как создать такое условие, чтобы title картинки выводился исключительно в случае, если картинка шириной более, скажем, чем 500 px? И второй вариант условия: если в свойствах картинки отсутствует выравнивание float, например <img src="kartinka.jpg" alt="Альтернативная подсказка" title="Название картинки" style="float:right;">.

Возможно ли такое в принципе? Благодарю вас за помощь!

jQuery(function($) {
    newsImg = $(".news img");
    newsImg.after(function(){
        imgTitle = $(this).attr("title");
        if (imgTitle) return "<div class='img_title'>"+imgTitle+"</div>";
    });
});

Answer 1

Не забывайте также проверять img на такие условия, как:

наличие атрибута title, иначе при соответсвии остальным критериям у вас в .img_title будет выводиться undefined;
длина атрибута title, иначе при title="" у вас будет создаваться пустой .img_title.

$(function() { 
  newsImg = $(".news img"); 
  newsImg.after(function() { 
    imgTitle = $(this).attr("title"); 
    if (imgTitle && imgTitle != '' && $(this).width() > 500 && $(this).css('float') == 'none') return "<div class='img_title'>" + imgTitle + "</div>"; 
  }); 
});

img { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="news"> 
  <img src="http://images.all-free-download.com/images/wallpapers_large/bmw_m4_coupe_4k_17473.jpg" style="width:400px"> 
  <img src="http://images.all-free-download.com/images/wallpapers_large/bmw_m4_coupe_4k_17473.jpg" style="width:600px;float:right"> 
  <img src="http://images.all-free-download.com/images/wallpapers_large/bmw_m4_coupe_4k_17473.jpg" style="width:600px"> 
  <img src="http://images.all-free-download.com/images/wallpapers_large/bmw_m4_coupe_4k_17473.jpg" title="" style="width:600px"> 
  <img src="http://images.all-free-download.com/images/wallpapers_large/bmw_m4_coupe_4k_17473.jpg" title="Соответствует всем условиям" style="width:600px"> 
</div>

Answer 2

$(function() { 
    newsImg = $(".news img"); 
    newsImg.after(function(){ 
        imgTitle = $(this).attr("title"); 
        if ($(this).width() > 500 && $(this).css('float') == 'none') return "<div class='img_title'>"+imgTitle+"</div>"; 
    }); 
});

.news{ 
    height: 100px; 
} 
img{ 
    height: 20px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="news"><img title="Нет" style="width:400px"> 
<img title="Нет" style="width:600px;float:right"> 
<img title="Пройдет тест" style="width:600px"> 
</div>