Question

这是我正在制作的脚本的一小部分，它会生成一个包含用户照片和文字的易趣列表。该脚本将所有代码输出为用于复制和粘贴的字符串，以及用于预览的呈现HTML / CSS / JavaScript。因此，href和src属性需要动态填充，因为我事先并不知道它们。在我看来，这个片段太多了。我目前还不确定如何解决这个问题。

我在CodeReview上发布了这段代码的工作文件和小提琴，希望得到关于我的代码的一般建议。由于这是一个特定的问题，我在这里发布。

以下是我将href填充到完整尺寸图片的前两个陈述：

var fullSizeSrc1 = $('#slide-upload tr:first td:first a').attr('href');
    if (fullSizeSrc1) {
        fullSizeSrc1 = fullSizeSrc1;
    } else {
        fullSizeSrc1 = '';
    }

var fullSizeSrc2 = $('#slide-upload tr:nth-child(2) td:first a').attr('href');
    if (fullSizeSrc2) {
        fullSizeSrc2 = fullSizeSrc2;
    } else {
        fullSizeSrc2 = '';
    }

我目前有七个，其中七个（这些填充了缩略图的src属性）：

var thumbSrc1 = fullSizeSrc1;
    if (thumbSrc1) {
        thumbSrc1 = thumbSrc1.replace(/files/g, 'files/thumbnail');
    } else {
        thumbSrc1 = '';
    }

以下是包含要生成的HTML标记的脚本的一部分，并使用上述变量填充适当的属性：

'<div id="mblSlide">' + 
    '<a href="'+fullSizeSrc1+'" target="blank"><img data-name="one" alt="" src="'+fullSizeSrc1+'"></a>' + 
    '<a href="'+fullSizeSrc2+'" target="blank"><img data-name="two" alt="" src="'+fullSizeSrc2+'"></a>' + 
'</div>' +
'<div id="mblThumbs">' + 
    '<img style="border:1px solid #fff;margin:3px" data-name="one" alt="" src="'+thumbSrc1+'">' + 
    '<img style="border:1px solid #fff;margin:3px" data-name="two" alt="" src="'+thumbSrc2+'">'
 '</div>' +

我希望这很清楚。如果没有，请让我知道什么是不清楚的，我会尽力，啊，澄清:)提前感谢你们所做的所有伟大的工作。

Answer 1

如评论中所述

if (fullSizeSrc1) {
    fullSizeSrc1 = fullSizeSrc1;
}

没有做任何事情或改变fullSizeSrc1的价值。你应该把它改成：

if(!(fullSizeSrc1)){
    fullSizeSrc1 = '';
}

//or if(fullSizeSrc1 === undefined)

关于不重新输入代码的原始问题：

当你发现自己将与var1，var2，var3，var4相同类型数据的不同实例命名时，我认为这是一个告诉。一旦开始计数，你应该考虑使用数组。

所以我们有一个开始：

var fullSizeSrc = [];
var fss = $('#slide-upload tr:first td:first a').attr('href');

if(!fss){
    fss = '';
}
fullSizeSrc.push();

但是我们还有7次写相同代码的问题吗？您应该看一下相同代码的每个版本之间的区别。第一个是变量名，我们通过使用数组解决了这个问题。

第二个区别是我们索引到子元素列表中。假设我们有7个要素来查看1 .. 7。我们可以使用一个简单的for循环来删除其他代码。

var fullSizeSrc = [];

var total = 7;
for(var i =1, i <= total; i++){
    var fss = $('#slide-upload tr:nth-child('+i+') td:first a').attr('href');

    if(!fss){
        fss = '';
    }
    fullSizeSrc.push();
}

但是，如果我们不知道列表大小呢？幸运的是nth-child jquery函数可以返回所有子元素的列表

var fullSizeSrc = [];
var links = $('#slide-upload tr:nth-child(n) td:first a');
$(links).each(funcion(i, a){
    var link = $(a).attr('href');
    if(!link){
        link = '';
    }

    fullSizeSrc.push(link);
})

结合几个相似的变量声明

1 个答案: