0

配列内の要素をチェックするための条件付きロジックを追加しています。要素が存在する場合は、JSで生成されたマークアップを使用してクラスを追加します。この冗長な条件付きロジックの一部を減らすために、2つの文字列（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

文字列の連結ではなく、.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 に答える
0

タグを作成する別の方法は次のとおりです。

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 に答える