Question

我正在使用以下使用Jquery Auto Complete的自动完成插件。它运作良好，完全符合我的需要但我的问题是我的JSON文件有数以千计的产品描述和图像。许多图像都已关闭，无法正常工作。

有没有人知道我如何用一般的本地图像替换那些破碎的图像链接？我无法手动进入JSON文件并替换这些图像，因为它需要数周时间。

我看了这个但没有帮助：“http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images”

非常感谢任何帮助。

这是FoxyComplete的JS和完整脚本的链接（抱歉无法让JsFiddle工作 - http://www.bcreatives.com.au/wp-content/uploads/dev/foxycomplete-local/）：

(function($) {
$(document).ready(function() {

    $( '#s' ).each( function(){
    $(this).attr( 'title', $(this).val() )
      .focus( function(){
        if ( $(this).val() == $(this).attr('title') ) {
          $(this).val( '' );
        }
      } ).blur( function(){
        if ( $(this).val() == '' || $(this).val() == ' ' ) {
          $(this).val( $(this).attr('title') );
        }
      } );
    } );

    $('input#s').result(function(event, data, formatted) {
        $('#result').html( !data ? "No match!" : "Selected: " + formatted);
    }).blur(function(){     
    });

    $(function() {      
    function format(mail) {
        return "<a href='"+mail.permalink+"'><img src='" + mail.image + "' /><span class='title'>" + mail.title +"</span></a>";         
    }

    function link(mail) {
        return mail.permalink
    }

    function title(mail) {
        return mail.title
    }

    $("#s").autocomplete(completeResults, {
        width: $("#s").outerWidth()-2,          
        max: 5,         
        scroll: false,
        dataType: "json",
        matchContains: "word",
        parse: function(data) {
            return $.map(data, function(row) {
                return {
                    data: row,
                    value: row.title,
                    result: $("#s").val()
                }
            });
        },
        formatItem: function(item) {                
            return format(item);
        }
        }).result(function(e, item) {
            $("#s").val(title(item));
            //location.href = link(item);
        });                     
    });

});
})(jQuery);

Answer 1

我相信SO question you linked的接受答案应该有效。只需使用以下内容替换format功能：

function format(mail) {
    return "<a href='"+mail.permalink+"'>" +
        "<img src='" + mail.image + "' onerror='this.src=\'/img/error.jpg\'' />" +
        "<span class='title'>" + mail.title +"</span></a>";         
}

并确保你有一个名为/img/error.jpg的图像，自然。

在Jquery自动完成中替换损坏的图像

1 个答案: