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

In jQuery is it Possible to Add Conditional Logic in between Strings

本文关键字：之间 添加 条件逻辑 字符串 jQuery      更新时间：2023-09-26

我正在添加一些条件逻辑来检查数组中的元素，如果它们存在，则使用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生成的标记中，以更干净的方式进行条件检查。想法？

您有很多重复-您可以通过识别常见字符串或元素并在一定程度上重构代码来实现所需内容。

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%确定这是正确的（因为说实话，原始代码有点难以解析），但它应该大致演示如何解决这个问题。

您应该使用诸如.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在同一作用域中践踏了以前的声明。

这里有另一种构建标签的方法：

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');
}
相关文章：