JavaScript для автоматического встраивания URL-адреса изображения работает, но выдает ошибки W3

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

Вот мои ошибки из W3:

обязательный атрибут "src" не указан

обязательный атрибут "alt" не указан

тип документа не позволяет элемент "img" здесь

конечный тег для "img" опущен, но был указан OMITTAG NO

Так что, очевидно, я просчитал код, но каким-то образом он работает.

Вот моя работа по взлому кода, может ли кто-нибудь помочь мне очистить этот беспорядок? (Я просто новичок, это было лучшее, что я мог придумать в нерабочее время);

<script type="text/javascript"> 

(function ($) {
    $(document).ready(function () {
        $(".content1 .postlink").oembed(null, {embedMethod: "append", maxWidth: 300,});
    });
})(jQuery);

$(document).ready(function () {
    var href = $('a.postlink.img-link').get(0).href;
    $('a.postlink.img-link').html($('').attr('src', href).fadeIn(1000));
    $('a.postlink.img-link').colorbox({rel: 'img-link'});
})
 </script>

person corleoner    schedule 14.07.2016    source источник


Ответы (2)


Это исправило это.

<script type="text/javascript"> //<![CDATA[
    // [your script here]
// ]]></script>
person corleoner    schedule 14.07.2016

Ваш код может нуждаться в некоторой очистке, но нам нужно увидеть соответствующий HTML, чтобы действительно помочь вам в очистке.

Вы, вероятно, хотите изменить

$('a.postlink.img-link').html($('').attr('src', href).fadeIn(1000));

to

$('a.postlink.img-link img').attr('src', href)

как начало.

Однако, чтобы ответить на ваш главный вопрос о валидаторе W3, посмотрите на страницу до запуска любого javascript. Итак, я предполагаю, что у вас есть теги <img> без атрибута src (похоже, это устанавливается javascript). Именно на такие ошибки жалуется валидатор.

HTML-страница должна действительно «работать» правильно, даже если javascript отключен. Даже если это просто означает отображение содержимого заполнителя или сообщения о том, что требуется javascript.

Чтобы исправить ошибки проверки, добавьте атрибуты src и alt к тегам img в вашем html, укажите им какие-то изображения-заполнители и текст, которые представляют фактическое содержимое, которое будет заменено вашим JS.

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

person fluoresce    schedule 14.07.2016
comment
Спасибо за ответ. Когда я заменяю эту строку, функция встраивания больше не работает, я просто получаю ссылку вместо изображения. - person corleoner; 14.07.2016
comment
Вот пример html ‹!-- m --›‹a class=postlink img-link href=gannett -cdn.com/-mm-/49c5e8ca3322a29b74978eae4b0a34ff58d50ae0/ rel=nofollow onclick=this.target='_blank';›gannett-cdn.com/-mm-/49c5e8c ... ball-C.jpg‹/a›‹!-- m --› - person corleoner; 14.07.2016
comment
И я прошу прощения за все сообщения, я новичок в этом формате, и каждый раз, когда я нажимаю Enter, я отправляю LOL. По сути, это просто та строка html, которая вызывает ошибки в W3, и определенно из кода JS, который я добавил, потому что, если я его удалю, все будет в порядке. - person corleoner; 14.07.2016
comment
хорошо, это было просто предположение. Нужно будет увидеть полный HTML, которым вы пытаетесь манипулировать. В приведенном выше примере нет тега img, который говорит мне, что там происходит какая-то другая магия javascript. Если вы используете какой-либо фреймворк, ваши вопросы лучше направлять в специальный список для этого фреймворка. - person fluoresce; 14.07.2016
comment
Люди на phpbb очень внимательно относятся к помощи re: элементам, которые не поддерживаются модификациями. Это было то, что я пытался понять сам, потому что я пытался узнать еще кое-что, чтобы иметь возможность выйти за рамки того, что доступно. Вот ссылка на сообщение, в котором возникает проблема: raiderforums.com/viewtopic.php ?t=8910&p=333253#p333253 - person corleoner; 14.07.2016