Question

我正在尝试使用jQuery制作Google Chrome扩展程序。现在，这是有效的，但它太长了（它不是“少写更多”）。所以我正在寻找一些速记。这就是做了什么

// max-width function from http://www.labs.skengdon.com/maxSize 
;(function($){$.fn.maxSize=function(options){if(typeof options!=='object'){var options={width:options,height:options}};return this.each(function(){$img=$(this);var F;var FW=0;var FH=0;if(options.width){FW=$img.width()/options.width;F=1;};if(options.height){FH=$img.height()/options.height;F=0;};if(FW&&FH){F=FW/FH;};if((F>=1)&&(FW>=1)){$(this).width(options.width);};if((F<=1)&&(FH>=1)){$(this).height(options.height);};});};})(jQuery);

// this insert divs
$('ol.floatcontainer').filter(':contains(Images)').after('<div id="wrapper" class="wrapper" name="wrapper"><div id="scroll" class="scroll" ></div><div id="big" class="big" name="big"><div id="loader" class="loading"></div></div><div id="footer" class="footer" name="footer"><p class="url"></p></div></div>');
$('#wrapper').css({"background-color":"#FFFFFF","margin":"0"});
$('.scroll').css({"background-color":"#ccc","padding":"0px"});
$('#big').css({"background-color":"#ddd","clear":"left"});//,"padding":"20px"
$('#footer').css({"background-color":"#eee","height":"1%"});

现在是我重复第16次的loooong和可怕的代码

if ($('.forumrow table').find('img:eq(0)').filter('img[src*="thumbs"]').length > 0)
{
$('.forumrow table').find('img:eq(0)').live("click",function(event) {
event.preventDefault();
$('div.sc_menu').show();
$('#wrapper').css({"background-color":"#FFFFFF","margin":"0"});
$('#scroll').css({"background-color":"#ccc"});//,"padding":"20px"
$('#big').css({"background-color":"#ddd","clear":"left","padding":"0px"});//"width":"500px","height":"375px"
$('#footer').css({"background-color":"#eee","height":"1%"});
$('div#loader').css({"width":"500px","height":"375px","overflow":"hidden"});
$('div#loader.loading').css({"background":"url(http://i.imgur.com/pOA7f.gif) no-repeat center center"});
var linkim1 = $(".forumrow table a:has(img):eq(0)").attr('href');
var imsrc1 = $('.forumrow table').find('img:eq(0)').attr('src');
var imsrc1sp = imsrc1.split(/thumbs/);
var imsrc1spdes = imsrc1sp[1];
var imsrc1spsin = imsrc1sp[0];
$(function () {
             $('#loader').empty(); $('#loader').addClass('loading');
        var img = new Image();//var img = new Image(500,375);
        $(img).load(function () {
            $(this).css('display', 'none');
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();   
            $(this).maxSize({
            width: 500,
            height: 375
            });

        }).error(function () {

    var imsrc1nntr = imsrc1spdes.split(/\//)[1];
    var big1nntr = imsrc1spsin + imsrc1nntr;
     $('#loader').empty(); $('#loader').addClass('loading');
        var img = new Image();
        $(img).load(function () {
            $(this).css('display', 'none');
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
            $(this).maxSize({
            width: 500,
            height: 375
            });
        }).attr('src', big1nntr);
         $('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc1spsin+''+imsrc1nntr+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim1+ '][img]'+imsrc1spsin+''+imsrc1nntr+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>');
        }).attr('src', imsrc1spsin+'medium'+imsrc1spdes);
         $('#loader').wrap('<a href="' +linkimm1+ '"></a>');
        $('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc1spsin+'medium'+imsrc1spdes+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim1+ '][img]'+imsrc1spsin+'medium'+imsrc1spdes+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>');
    });

$('img[src*="thumbs"]').css("-webkit-box-shadow","0px 0px 0px black, 0px 0px 0px black");
$(this).css("-webkit-box-shadow","2px 2px 2px black, 2px 1px 10px black");
});
//end first if
}

现在这就是我重复的内容，即

if ($('.forumrow table').find('img:eq(1)').filter('img[src*="thumbs"]').length > 0)
{
$('.forumrow table').find('img:eq(1)').live("click",function(event) {
event.preventDefault();
$('div.sc_menu').show();
$('#wrapper').css({"background-color":"#FFFFFF","margin":"0"});
$('#scroll').css({"background-color":"#ccc"});//,"padding":"20px"
$('#big').css({"background-color":"#ddd","clear":"left","padding":"0px"});//"width":"500px","height":"375px"
$('#footer').css({"background-color":"#eee","height":"1%"});
$('div#loader').css({"width":"500px","height":"375px","overflow":"hidden"});
$('div#loader.loading').css({"background":"url(http://i.imgur.com/pOA7f.gif) no-repeat center center"});
var linkim2 = $(".forumrow table a:has(img):eq(1)").attr('href');
var imsrc2 = $('.forumrow table').find('img:eq(1)').attr('src');
var imsrc2sp = imsrc2.split(/thumbs/);
var imsrc2spdes = imsrc2sp[1];
var imsrc2spsin = imsrc2sp[0];
$(function () {
             $('#loader').empty(); $('#loader').addClass('loading');
        var img = new Image();//var img = new Image(500,375);
        $(img).load(function () {
            $(this).css('display', 'none');
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();   
            $(this).maxSize({
            width: 500,
            height: 375
            });

        }).error(function () {

    var imsrc2nntr = imsrc2spdes.split(/\//)[1];
    var big2nntr = imsrc2spsin + imsrc2nntr;
     $('#loader').empty(); $('#loader').addClass('loading');
        var img = new Image();
        $(img).load(function () {
            $(this).css('display', 'none');
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
            $(this).maxSize({
            width: 500,
            height: 375
            });
        }).attr('src', big2nntr);
         $('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc2spsin+''+imsrc2nntr+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim2+ '][img]'+imsrc2spsin+''+imsrc2nntr+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>');
        }).attr('src', imsrc2spsin+'medium'+imsrc2spdes);
         $('#loader').wrap('<a href="' +linkimm2+ '"></a>');
        $('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc2spsin+'medium'+imsrc2spdes+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim2+ '][img]'+imsrc2spsin+'medium'+imsrc1spdes+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>');
    });

$('img[src*="thumbs"]').css("-webkit-box-shadow","0px 0px 0px black, 0px 0px 0px black");
$(this).css("-webkit-box-shadow","2px 2px 2px black, 2px 1px 10px black");
});
//end second if
}

有没有办法不重复这个第16次？也许是短线或功能？

Answer 1

如何使用数组，函数和for循环？不会大幅提高可读性，但会减少复制意大利面。：d

imgsrc = new Array();
 ....
function magic (index) {
    if ($('.forumrow table').find('img:eq(' + index + ')').filter('img[src*="thumbs"]').length > 0)
            {
            $('.forumrow table').find('img:eq($index)').live("click",function(event) {
                event.preventDefault();
                $('div.sc_menu').show();
                $('#wrapper').css({"background-color":"#FFFFFF","margin":"0"});
                $('#scroll').css({"background-color":"#ccc"});//,"padding":"20px"
                $('#big').css({"background-color":"#ddd","clear":"left","padding":"0px"});//"width":"500px","height":"375px"
                $('#footer').css({"background-color":"#eee","height":"1%"});
                $('div#loader').css({"width":"500px","height":"375px","overflow":"hidden"});
                $('div#loader.loading').css({"background":"url(http://i.imgur.com/pOA7f.gif) no-repeat center center"});
                var linkim[$index] = $(".forumrow table a:has(img):eq(" + index + ")").attr('href');
                var imsrc[$index] = $('.forumrow table').find('img:eq(' + index + ' . ')').attr('src');
                    var imsrcsp[index] = imsrc[index].split(/thumbs/);
                    var imsrcspdes[index] = imsrcsp[index][1];
                    var imsrcspsin[index] = imsrc2sp[index][0];
                    $(function () {
                        $('#loader').empty(); $('#loader').addClass('loading');
                        var img = new Image();//var img = new Image(500,375);
                        $(img).load(function () {
                            $(this).css('display', 'none');
                            $('#loader').removeClass('loading').append(this);
                            $(this).fadeIn();   
                            $(this).maxSize({
width: 500,
height: 375
});
                            }
                            }).error(function () {

                                var imsrc2nntr = imsrc2spdes.split(/\//)[1];
                                var big2nntr = imsrc2spsin + imsrc2nntr;
                                $('#loader').empty(); $('#loader').addClass('loading');
                                var img = new Image();
                                $(img).load(function () {
                                    $(this).css('display', 'none');
                                    $('#loader').removeClass('loading').append(this);
                                    $(this).fadeIn();
                                    $(this).maxSize({
width: 500,
height: 375
});
                                    }).attr('src', big2nntr);
                                $('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc2spsin+''+imsrc2nntr+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim2+ '][img]'+imsrc2spsin+''+imsrc2nntr+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>');
                                }).attr('src', imsrc2spsin+'medium'+imsrc2spdes);
$('#loader').wrap('<a href="' +linkimm2+ '"></a>');
$('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc2spsin+'medium'+imsrc2spdes+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim2+ '][img]'+imsrc2spsin+'medium'+imsrc1spdes+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>');
});

$('img[src*="thumbs"]').css("-webkit-box-shadow","0px 0px 0px black, 0px 0px 0px black");
$(this).css("-webkit-box-shadow","2px 2px 2px black, 2px 1px 10px black");
});
//end second if
}

for (i=0; i<16; i++) {
    magic(i);
}

代码太长且重复，ISO缩写

1 个答案: