Почему я получаю неопределенную ошибку из этого jquery?

Question

Я пытаюсь обеспечить всегда изображение с личной биографией. Могут быть два изображения или ни один доступный для использования (входящий из фида Parser Xpath). Если в XML не найдено изображения, я хочу загрузить заполнитель по умолчанию. Консоль сообщает мне эту строку «Uncaught TypeError: Невозможно прочитать свойство« indexOf »неопределенного». Я пробовал много вещей, чтобы исправить это, но не повезло. Любые рекомендации приветствуются.

if ($('.a_class').attr('src').indexOf('jpg') == -1 
    && $('.b_class').attr('src').indexOf('jpg') == -1) { 

    $('.a_class').attr('src', '/folder/default_img.JPG'); 
} 

Answer 1

Во-первых, запуск одного и того же селектора jQuery несколько раз стоит дорого. По моему опыту, сэкономив селектор делает Javascript заметно более отзывчивым:

var aClass = $('.a_class'); 
var bClass = $('.b_class'); 

Согласно attr(attributeName) документации JQuery, он может вернуть неопределенным, если атрибут не установлен, поэтому у вас есть несколько вещей, чтобы проверить в вашем если условии , Я также кэшировать результат attr(attributeName) в переменной:

var aClassSrc = aClass.attr('src'); 
var bClassSrc = aClass.attr('src'); 

Это должно, наконец, работать:

if ((typeof aClassSrc === "undefined" || aClassSrc.indexOf('jpg') == -1) 
&& (typeof bClassSrc === "undefined" || bClassSrc.indexOf('jpg') == -1)) { 
    aClass.attr('src', '/folder/default_img.JPG'); 
} 

Примечание, что мы предполагаем, что a_class и существуют b_class где-то в той части DOM, который вы ищете, и они существуют один раз. Если они не существуют, вызовы attr(attributeName) ничего не сделают без предупреждения. Кроме того, если есть несколько элементов a_class или b_class, то вызов attr, который устанавливает тег «src», установит его для каждого элемента a_class. Убедитесь, что с этим все в порядке.

Answer 2

Я использовал ответ javaJake как основу для написания остальной части необходимой логики, чтобы надеяться сделать эту работу полностью (см. Ниже). Код не вызывает никаких ошибок в консоли. Тем не менее, я обнаружил, что что-то (в CMS) жестко закодировано, чтобы переопределить javascript, который я добавляю на страницу, поэтому я действительно не знаю, работает ли это еще. Если вы не видите что-то явно очевидное с кодом, я думаю, что пока нет смысла отвечать. Я изучаю, что делает переопределение и обновляю сообщение, когда я это делаю. Я хочу поблагодарить всех за их помощь, комментарии и предложения.

<script> 
var aClass = $('.a_class'); 
var bClass = $('.b_class'); 
var cId = $('#c_Id'); 
var aClassSrc = aClass.attr('src'); 
var bClassSrc = bClass.attr('src'); 
// set default if nothing is returned in XML 
if ((typeof aClassSrc === "undefined" || aClassSrc.indexOf('jpg') == -1) && (typeof bClassSrc === "undefined" || bClassSrc.indexOf('jpg') == -1)) { 
cId.attr('src', '/folder/imagefield_default_images/bio_default_photo.JPG'); 
} 
// if two images are returned, use aClass and hide bClass 
else if ((typeof aClassSrc === "undefined" || aClassSrc.indexOf('jpg') >= 0) && (typeof bClassSrc === "undefined" || bClassSrc.indexOf('jpg') == 0)) 
$('.b_class').hide(); 
// if aClass is not preset, use bClass and hide aClass's broken image URL icon 
else if ((typeof aClassSrc === "undefined" || aClassSrc.indexOf('jpg') >= -1) && (typeof bClassSrc === "undefined" || bClassSrc.indexOf('jpg') == 0)) 
$('.dm_image').hide(); 
</script>