Скрыть изображение, если src пуст

87
9

Я пытаюсь скрыть <img>, если источник пуст. Но мне не повезло.


Я нашел несколько сообщений здесь, но это не работает для меня.


Вот мой код, он основан на таблице, потому что это будет шаблон:
Изображения:


<td width="92%" align="center" class="imagenes_desc">
<a href="#" class="showcase"><img class="imagen" src="http://webs.ono.com/norfolk/ebay/images/01.jpg" width="800"></a>
<a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
<a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
<a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
<a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
<a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
<a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
<a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
<a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
<a href="#" class="showcase"><img class="imagen" src="" width="800"></a>
</td>

Вот Javascript, который я пытаюсь реализовать.


<script type="text/javascript">
$(document).ready(function(){
if ($(".imagen").attr(src="") == "") {
$(".imagen").hide();
}
else {
$(".imagen").show();
}
</script>

Я не очень хорошо знаком с JS, я нашел этот script здесь, в Stackoverflow, но я не могу заставить его работать.


Обновление


Попытка, но не работает (Chrome хорошо скрывается, но Firefox и IE этого не делают):


<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
$("imagen").each(function(){

if ($(this).attr("src") == "")
$(this).hide();
else

$(this).show();
});
</script>
<style>
.hide {display:none !important;}
.show {display:block !important;}
</style>


Спасибо,

спросил(а) 2021-01-19T18:43:16+03:00 3 месяца, 2 недели назад
1
Решение
144

Вы можете просто использовать CSS для этого:


img[src=""] {
display: none;
}

<img src="">
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg">

ответил(а) 2021-01-19T18:43:16+03:00 3 месяца, 2 недели назад
114

Ваша логика ошибочна.


if ($(".imagen").attr(src="") == "") {
$(".imagen").hide();
}
else {
$(".imagen").show();
}

Это не сработает, поскольку у вас есть итерация через каждый экземпляр .imagen


$('.imagen').show().filter(function(){
return $(this).attr('src') == '';
}).parents('a').hide();

Выше мы показываем все .imagen 's, затем фильтруем на основе их атрибута src, затем скройте тот, с которым мы остались.


В качестве боковой точки вам может понадобиться скрыть родительский элемент <a>, а не изображение.

ответил(а) 2021-01-19T18:43:16+03:00 3 месяца, 2 недели назад
98

Как насчет использования селекторов атрибутов jQuery?


    $(document).ready(function(){
$('.imagen[src=""]').hide();
$('.imagen:not([src=""])').show();
});

Рабочий пример здесь

ответил(а) 2021-01-19T18:43:16+03:00 3 месяца, 2 недели назад
76

У вас неправильный синтаксис для получения значения src по attr()


Измените


if ($(".imagen").attr(src="") == "") {

Для


$(".imagen").each(function(){     
if ($(this).attr("src") == "")
$(this).hide();
else
$(this).show();
});

ответил(а) 2021-01-19T18:43:16+03:00 3 месяца, 2 недели назад
62

Я удивлен, что у вас нет какой-либо синтаксической ошибки
И вы тоже код, потому что он не проверяет каждый экземпляр .imagen.


Сделайте это так:


$(".imagen[src='']").hide();

ответил(а) 2021-01-19T18:43:16+03:00 3 месяца, 2 недели назад
62

В вашей таблице стилей добавьте следующий код для определения "скрытого" класса:


 .hidden {
display: none;
}

Затем добавьте следующий код javascript:


$(document).ready(function() {
$(".imgagen").each(function() {
var atr = $(this).attr("src");
if(atr == "") {
$(this).addClass("hidden");
} else {
$(this).removeClass("hidden");
}
});
});

ответил(а) 2021-01-19T18:43:16+03:00 3 месяца, 2 недели назад
44

test для атрибута src, если его значение равно null, но в любом случае - если вы скрываете изображения, что происходит с обертывающими элементами A? Скорее, не создавайте элементы A/IMG для тех, у кого нет изображения.

ответил(а) 2021-01-19T18:43:16+03:00 3 месяца, 2 недели назад
44

Ваш код, который вы опубликовали, должен работать, но убедитесь, что вы добавили файлы библиотеки jquery в заголовок страницы ur html.


перейдите на сайт jQuery, а затем загрузите файл js. затем добавьте следующую строку в голову раздела страницы HTML:

ответил(а) 2021-01-19T18:43:16+03:00 3 месяца, 2 недели назад
44

Просто поместите пробел в тег alt.Here работает код


 <img class="imagen" src="" width="800" alt" ">

ответил(а) 2021-01-19T18:43:16+03:00 3 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема