0

我正在添加一些条件逻辑来检查数组中的元素，如果它们存在，则使用 JS 生成的标记添加类来执行此操作。有没有办法在两个字符串（作为标记从 JS 输出）之间添加条件逻辑来减少一些冗余的条件逻辑？

for (var i=0; i<data.length; i++) {
        var gallery = data[i];

        if (typeof gallery.showcase !== "undefined") {
            if (typeof gallery.video !== "undefined") {
                $(
                "<li class='video "  + (typeof gallery.video !== "undefined" ? "test ") + gallery.showcase + "'>" +
                    "<a href='" + gallery.link + "'></a>" +
                "</li>").appendTo("#gallery ul");   
            }
            else {
                $(
                "<li class='image " + gallery.showcase + "'>" +
                    "<a href='" + gallery.link + "'>" + 
                        "<img src=" + gallery.image + " alt='" + gallery.title + "'>" +
                    "</a>"
                + "</li>").appendTo("#gallery ul"); 
            }       
        }
        else {
            if (typeof gallery.video !== "undefined") {
                $(
                "<li class='video'>" +
                    "<a href='" + gallery.link + "'></a>" + 
                "</li>").appendTo("#gallery ul");   
            }
            else {
                $(
                "<li class='image'>" +
                    "<a href='" + gallery.link + "'>" + 
                        "<img src=" + gallery.image + " alt='" + gallery.title + "'>" +
                    "</a>"
                + "</li>").appendTo("#gallery ul"); 
            }       
        }
    }

我希望以更简洁的方式将类添加到 JS 生成的标记中进行条件检查。想法？

4

3 回答 3

1

你有很多重复——你可以通过识别常见的字符串或元素并稍微重构代码来实现你所需要的。

for (var i = 0; i < data.length; i++) {
    var gallery = data[i];

    var isImage = (typeof gallery.video === 'undefined');

    var $li = $('<li>', {'class': isImage ? 'image' : 'video'});
    if (typeof gallery.showcase !== 'undefined') {
        $li.addClass(gallery.showcase);
    }

    var $a = $('<a>', {href: gallery.link});
    if (isImage) {
        $('<img>', {src: gallery.image, alt: gallery.title}).appendTo($a);
    }       

    $li.appendTo('#gallery ul').append($a);
}

我不是 100% 确定这是正确的（老实说，原始代码有点难以解析），但它应该大致展示你将如何解决这个问题。

于 2012-07-13T18:40:52.803 回答
0

Here's another way to build the tags:

for (var i = 0; i < data.length; i++) {

    var gallery = data[i];
    var isShowCase = typeof gallery.showcase !== "undefined";
    var isVideo = typeof gallery.video !== "undefined";

    var $li = $('<li><a><img /></a></li>');

    if (isShowCase) {
        if (isVideo) {
            $li.addClass('video ' + gallery.showcase + (isVideo ? ' test' : '')).find('a').attr('href', gallery.link);
        }
        else {
            $li.addClass('image ' + gallery.showcase).find('a').attr('href', gallery.link).find('img').attr({ src: gallery.image, alt: gallery.title });
        }
    }
    else { 
        ....
    }

    $li.appendTo('#gallery ul');
}
于 2012-07-13T19:00:50.377 回答
0

您应该使用 .attr 和 .prop 等 jquery 方法来定义 jquery 对象的属性和属性，而不是字符串连接。

这不仅是最佳实践，而且会消除您的冗余代码：（这只是一个示例，我意识到它不符合您的要求，这是您自己弄清楚的：P）

var li = $('<li>');

if (typeof gallery.video !== "undefined") {
    li.addClass('video');
} else {
    li.addClass('image');
}
// etc etc etc
li.appendTo("#gallery ul");

另请注意，javascript 没有块范围，因此您var gallery在同一范围内踩踏先前的声明。

于 2012-07-13T18:14:44.443 回答