Javascript 在jQuery中，可以在字符串之间添加条件逻辑吗

我正在添加一些条件逻辑来检查数组中的元素，如果它们存在，则使用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"); 
            }       
        }
    }

---

for（var i=0；i您应该使用jquery方法，例如.attr和.prop来定义jquery对象的属性和属性，而不是字符串连接

这不仅是最佳实践，而且可以消除冗余代码：
（这只是一个例子，我意识到它与您的要求不匹配，这需要您去弄清楚：P）

var li=$（“
”）；
if（typeof gallery.video！=“未定义”）{
li.addClass（“视频”）；
}否则{
li.addClass（“图像”）；
}
//等等等等等等
li.附于（“#画廊ul”）；

还需要注意的是，javascript没有块作用域，因此您的
var gallery
在同一作用域中对以前的声明进行了践踏。
您有很多重复-您可以通过识别常见字符串或元素并稍微重构代码来实现所需的功能

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);
}

for（变量i=0；i”，{'class'：isImage？'image'：'video'}）；
if（typeof gallery.showcase！=“未定义”）{
$li.addClass（画廊、陈列室）；
}
var$a=$（“”，{href:gallery.link}）；
如果（isImage）{
$('
我不是100%确定这是正确的（因为老实说，原始代码有点难解析），但它应该大致说明如何解决这个问题。
这里是构建标记的另一种方法：

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');
}

for（变量i=0；ivar$li=$（“
您应该使用jquery方法，例如
.attr
和
.prop
来定义jquery对象上的属性和属性，而不是字符串连接。@Raminson
typeof
一元运算符将类型作为字符串返回。这是完全有效的，也是最佳做法。@jbabey，我们为什么要使用
.attr
和
prop？”代替字符串中的直接值？（如果不是好看的代码）@Jashwant更快、更干净、更易于维护：
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');
}