Fatal编程技术网
  • jquery/
  • Jquery JS模板：如何根据值设置if/else？

Jquery JS模板：如何根据值设置if/else？

jquery json if-statement

Jquery JS模板：如何根据值设置if/else？,jquery,json,if-statement,mustache,Jquery,Json,If Statement,Mustache,给定JSON数据/css.JSON，例如： { "CSS": [ { "group":"Boxes", "css-class":"img", "syntaxe": "img/css-metric.png", "logic-english": "", "level":"A1" }, { "group":"Boxes", "css-class":"list", "syntaxe": "margin", "logic-english": "", "level":"A1

给定JSON数据/css.JSON，例如：

 { "CSS": [
 { "group":"Boxes", "css-class":"img",  "syntaxe": "img/css-metric.png",    "logic-english": "",    "level":"A1" }, 
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin",    "logic-english": "",    "level":"A1" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-top",    "logic-english": "",    "level":"B2" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-right",  "logic-english": "",    "level":"B2" }
]}

 { "CSS": [
 { "group":"Boxes", "css-class":"img",  "syntaxe": "",  "syntaxe2": "<img src='img/css-metric.png' widht='100%' height='100%'>",    "logic-english": "",    "level":"A1" }, 
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin",    "logic-english": "",    "level":"A1" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-top",    "logic-english": "",    "level":"B2" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-right",  "logic-english": "",    "level":"B2" }
]}
HTML，例如：

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}{{{syntaxe}}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>
？

已更新！底部带有“当前”代码的可能解决方案

尝试使用jQuery的方法：

再说一次，我不太了解胡子，但如果我完全了解你的胡子，我会在jQuery中这样做：

$（函数（）{
如果（数据[“CSS”]）{//请检查CSS是否存在
$.each（data.CSS，function（i，v）{//i是数组的索引，v是值
var newDiv=$（“”，{class:v[“css class”]}）。追加(
$（“
，{class:“逻辑英语”，text:v[“逻辑英语”]}）
);
如果（v[“css类”]）{//请检查数据值是否存在
如果（v[“css类”]=“img”）{
新编预编(
$（“”，{class:v[“level”]，text:v[“syntax”]}）
);
}
}
新分部附录（$（“#myContainer”）；
});
}
})
已更新！底部带有“当前”代码的可能解决方案

尝试使用jQuery的方法：

再说一次，我不太了解胡子，但如果我完全了解你的胡子，我会在jQuery中这样做：

$（函数（）{
如果（数据[“CSS”]）{//请检查CSS是否存在
$.each（data.CSS，function（i，v）{//i是数组的索引，v是值
var newDiv=$（“”，{class:v[“css class”]}）。追加(
$（“
，{class:“逻辑英语”，text:v[“逻辑英语”]}）
);
如果（v[“css类”]）{//请检查数据值是否存在
如果（v[“css类”]=“img”）{
新编预编(
$（“”，{class:v[“level”]，text:v[“syntax”]}）
);
}
}
新分部附录（$（“#myContainer”）；
});
}
})
我发现，如果/then on value这样做的最小修改是编辑JSON，现在它包含了两种可能的结果。我添加了一个JSON键
syntaxe2
。{syntaxe}的值和{syntaxe2}的值都是使用
{{syntaxe}}{{{syntaxe2}}}
调用的，但给定行中只存在一个值。因此，它不是
{{syntaxe1}}
（转义）就是
{{{syntaxe2}}}
（未转义）。这个JSON+tpl技巧对我的案例具有与if/then相同的效果

（修改）JSON数据/css.JSON，例如：

 { "CSS": [
 { "group":"Boxes", "css-class":"img",  "syntaxe": "img/css-metric.png",    "logic-english": "",    "level":"A1" }, 
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin",    "logic-english": "",    "level":"A1" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-top",    "logic-english": "",    "level":"B2" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-right",  "logic-english": "",    "level":"B2" }
]}

 { "CSS": [
 { "group":"Boxes", "css-class":"img",  "syntaxe": "",  "syntaxe2": "<img src='img/css-metric.png' widht='100%' height='100%'>",    "logic-english": "",    "level":"A1" }, 
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin",    "logic-english": "",    "level":"A1" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-top",    "logic-english": "",    "level":"B2" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-right",  "logic-english": "",    "level":"B2" }
]}

{“CSS”：[
{“group”：“Box”，“css class”：“img”，“syntaxe”：“syntaxe2”：“logic english”：“level”：“A1”}，
{“group”：“Box”，“css class”：“list”，“Syntax”：“margin”，“logic english”：“level”：“A1”}，
{“group”：“Box”，“css class”：“list”，“Syntax”：“margin top”，“logic english”：“level”：“B2”}，
{“group”：“Box”，“css class”：“list”，“Syntax”：“margin right”，“logic english”：“level”：“B2”}
]}
（相同）HTML，例如：

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}{{{syntaxe}}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>
（相同）HTML的JS设置：

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}{{{syntaxe}}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>
（修改）HTML的JS模板：

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}{{{syntaxe}}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>


{{{CSS}}
{{syntax}}{{syntax}}}
{{logic english}
{CSS}
（相同）HTML的JS注入程序：

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}{{{syntaxe}}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

//代码4:有效
$（函数（）{
$.getJSON（'data/css.json'，函数（data）{
var template=$（'#tpl'）.html（）；
var info=Mustache.to_html（模板、数据）；
$（'#anchor'）.html（信息）；
});
});
我发现，如果/then on value这样做的最小修改是编辑JSON，现在它包含了两种可能的结果。我添加了一个JSON键
syntaxe2
。{syntaxe}的值和{syntaxe2}的值都是使用
{{syntaxe}}{{{syntaxe2}}}
调用的，但给定行中只存在一个值。因此，它不是
{{syntaxe1}}
（转义）就是
{{{syntaxe2}}}
（未转义）。这个JSON+tpl技巧对我的案例具有与if/then相同的效果

（修改）JSON数据/css.JSON，例如：

 { "CSS": [
 { "group":"Boxes", "css-class":"img",  "syntaxe": "img/css-metric.png",    "logic-english": "",    "level":"A1" }, 
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin",    "logic-english": "",    "level":"A1" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-top",    "logic-english": "",    "level":"B2" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-right",  "logic-english": "",    "level":"B2" }
]}

 { "CSS": [
 { "group":"Boxes", "css-class":"img",  "syntaxe": "",  "syntaxe2": "<img src='img/css-metric.png' widht='100%' height='100%'>",    "logic-english": "",    "level":"A1" }, 
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin",    "logic-english": "",    "level":"A1" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-top",    "logic-english": "",    "level":"B2" },
 { "group":"Boxes", "css-class":"list", "syntaxe": "margin-right",  "logic-english": "",    "level":"B2" }
]}

{“CSS”：[
{“group”：“Box”，“css class”：“img”，“syntaxe”：“syntaxe2”：“logic english”：“level”：“A1”}，
{“group”：“Box”，“css class”：“list”，“Syntax”：“margin”，“logic english”：“level”：“A1”}，
{“group”：“Box”，“css class”：“list”，“Syntax”：“margin top”，“logic english”：“level”：“B2”}，
{“group”：“Box”，“css class”：“list”，“Syntax”：“margin right”，“logic english”：“level”：“B2”}
]}
（相同）HTML，例如：

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}{{{syntaxe}}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>
（相同）HTML的JS设置：

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}{{{syntaxe}}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>
（修改）HTML的JS模板：

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}{{{syntaxe}}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>


{{{CSS}}
{{syntax}}{{syntax}}}
{{logic english}
{CSS}
（相同）HTML的JS注入程序：

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

<body id="anchor"></body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script id="tpl" type="text/template">
    {{#CSS}}<div class="{{css-class}}"><p class="{{level}} level">{{syntaxe}}{{{syntaxe}}}</p><p class="logic-english">{{logic-english}}</p></div>{{/CSS}}
</script>

<script>// Code 4: WORKS
        $(function() {
                $.getJSON('data/css.json', function(data) {
                    var template = $('#tpl').html();
                    var info = Mustache.to_html(template, data);
                    $('#anchor').html(info);
                });
        });
</script>

//代码4:有效
$（函数（）{
$.getJSON（'data/css.json'，函数（data）{
var template=$（'#tpl'）.html（）；
var info=Mustache.to_html（模板、数据）；
$（'#anchor'）.html（信息）；
});
});
根据前面的回答建议

另一个解决方案 在元素创建后对其使用jQuery方法

在模板化JavaScript将新元素写入DOM之后，您可以使用jQuery和方法进行修复

这看起来像：

$(function() {
    $.getJSON('data/css.json', function(data) {
        var template = $('#tpl').html();
        var info = Mustache.to_html(template, data);
        $('#anchor').html(info);

        $(".img").each(function(i) {
            var myP = $(this).children("p").first(),
                myClass = myP.attr("class"),
                mySrc = myP.text();
            myP.replaceWith($("<img />", { class: myClass, height: 64, width: 64, src: mySrc }));
        });
    });
});

$（函数（）{
$.getJSON（'data/css.json'，函数（data）{
var template=$（'#tpl'）.html（）；
var info=Mustache.to_html（模板、数据）；