使用 json 填充 switch case 数据答案

【问题标题】：Populate switch case data using json使用 json 填充 switch case 数据
【发布时间】：2015-08-06 19:39:16
【问题描述】：

我正在尝试使用 json 添加开关案例。如何填充数据？

这是预期的输出：

$(".custom-menu li").click(function(){
     switch($(this).attr("data-action")) {
     // A case for each action.
         case "Science": $('.abc:eq(0)').trigger('click',['Zoology']); break;
         case "Science": $('.abc:eq(1)').trigger('click',['Botany']); break;
         case "Maths": $('.abc:eq(2)').trigger('click',['Geometry']); break;
     }
});

这是结构：

$(".custom-menu li").click(function(){
     switch($(this).attr("data-action")) {
       //looking to populate data here
     }
});

var val;
$.ajax({url: 'subjects.json'}).done(function(d) {
    val = d;
    $.each(val, function(i, su) {
      $('case "'+su[0]+'": $('.content:eq(0)').trigger('click',['+su[1]+']); break;')
      .appendTo('data-action'); //How to refer $(this).attr("data-action")
    });
});

json:

[ [ "Science", "Zoology"],
[ "Science", "Botany"],
[ "Maths", "Geometry"] ]

【问题讨论】：

你想在$(".custom-menu li").click.... 中做什么动作和主题以及$('.abc') 点击处理程序做什么
@Satpal 谢谢我想通过$(".custom-menu li") 点击触发$('.abc') 点击。为了触发点击，我将 json 值传递给 $('.abc') 点击。
@amdixon 谢谢。对我来说没有太大意义。您的意思是通过json将每个案例传递给switch语句？作为“科学”案例： $('.abc:eq(0)').trigger('click',['Zoology']);休息;
有一个函数可以查看该 json 输入并生成 switch 语句（作为字符串）作为输出。然后这个字符串可以是evald in $(".custom-menu li").click
您能告诉我们您的 HTML 代码吗？

标签： javascript jquery json

【解决方案1】：

不确定是否要使用开关盒。可以使用for循环和if

var jsonString = '[ [ "Science", "Zoology"],[ "Science", "Botany"],[ "Maths", "Geometry"] ]';
var keyValuePairs = JSON.parse(jsonString)
for(var i = 0, l = keyValuePairs.length; i < l; i++)
{
    if($(this).attr("data-action") == keyValuePairs[i][0])
        $('.abc:eq(' + i + ')').trigger('click',[keyValuePairs[i][1]);
}

注意： 请记住，this 不会评估，除非它在您上面指定的函数内

编辑： 使用 eval 切换案例版本。请记住，不赞成使用 eval

var codeToEval = "";
var codeHead = '$(".custom-menu li").click(function(){\
     switch($(this).attr("data-action")) {\
     // A case for each action.'
var part1 = 'case "', part2 = '": $(".abc:eq("';
var part3 =  '").trigger("click",["', part4 = '"]); break;';
var codeFoot = '});'
codeToEval = codeHead;
for(var i = 0, l = keyValuePairs.length; i < l; i++)
{
    codeToEval += part1 + keyValuePairs[i][0] + part2 + i +
            part3 + keyValuePairs[i][1] + part4;
}
codeToEval += codeFoot;
eval(codeToEval);

这将在全局范围内运行代码但是以您描述的代码格式构建一个字符串

【讨论】：

谢谢。 if($(this).attr("data-action") == keyValuePairs[i][0]) 是什么意思？
@Becky 您指定的 json 是一个包含数组的数组。所以在第一个循环中，“i”将为 0，因此较大数组中的第一个数组即。[“Science”，“Zoology”]。第二个“[0]”将是较小数组中的第一个值，在第一种情况下将是“科学”
谢谢。由于我的 json 是在外部保存的，我可以这样做 $.each(val, function(i, su) { $('.abc:eq(' + su[0] + ')').trigger('click',[' + su[0]] + '); }); 吗？但是如何将它与$(".custom-menu li").click(function(){ 连接起来？
很抱歉现在不能给你答案（我需要考虑更多），但我还没有听说过你可以创建一个你可以输入动态代码的场景一个范围内。所以你需要用 eval 或类似的东西动态地创建整个函数，以便在全局范围内运行。在执行switch case 时，它无法访问您的switch case 中的这些变量
@Becky。你输入了“$.each(val, function(i, su) { $('.abc:eq(' + su[0] + ')').trigger('click',[' + su[0]] + '); });”______你的意思是$.each(val, function(i, su) { $('.abc:eq(' + su[0] + ')').trigger('click',[su[1]]); });，看起来更像你的预期输出。

【解决方案2】：

首先，开关不会像你演示的那样工作，所以我使用两个数组元素来创建它。

现在：这非常丑陋，不是我的建议，但要做到这一点，您需要在创建后将脚本附加到 DOM。

首先，我通过 JSON 创建“菜单”和脚本（因为我没有用于菜单/列表的 HTML）。

这是一个展示它工作的小提琴：enter link description here

代码：

// create json object
var myjson = [
    ["Science", "Zoology"],
    ["Science", "Botany"],
    ["Maths", "Geometry"]
];
var myscriptStart = '$(".custom-menu li").on("click",function(){switch($(this).data("action")+$(this).data("subject")) {';
var myscriptEnd = '}});';
var myscriptMiddle = '';
// create the menu and list of click targets
$(myjson).each(function (index) {
    var key = this[0];
    var val = this[1];
    $('#menu').append('<li data-action="' + key + '"+ data-subject="' + val + '" data-target=".abc:eq(' + index + ')" >' + key + '</li>');
    $('#mytargets').append('<div class="abc">' + key + val + '</div>');
    myscriptMiddle += 'case "' + key + val + '": $(".abc:eq(' + index + ')").trigger("hack",["' + val + '"]); break;';
}).promise().done(function () {
    var myfullscript = myscriptStart + myscriptMiddle + myscriptEnd;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.text = myfullscript; // use this for inline script
   document.body.appendChild(script);
});;
// menu click handler
$(".custom-menu li").on('rack', function () {
    var action = $(this).data("action");
    var actionTarget = $(this).data("target");
    var actionSubject = $(this).data("subject");
    $(actionTarget).trigger('click', actionSubject);
});

$('.abc').on('hack', function (e, a) {
    alert(a);//what you passed in the hack event creation
    $('#result').text($(this).text() + this.classList + $(this).index('.abc'));
});

【讨论】：

【解决方案3】：

这是处理这些类型事情的正确方法：小提琴示例：http://jsfiddle.net/MarkSchultheiss/4bkxqvo9/

// create json object
var myjson = [
    ["Science", "Zoology"],
    ["Science", "Botany"],
    ["Maths", "Geometry"]
];
// create the menu and list of click targets
$(myjson).each(function (index) {
    var key = this[0];
    var val = this[1];
    $('#menu').append('<li data-action="' + key + '"+ data-subject="' + val + '" data-target=".abc:eq(' + index + ')" >' + key + '</li>');
    $('#mytargets').append('<div class="abc">' + key + val + '</div>');
});
// menu click handler
$(".custom-menu li").on('click', function () {
    var action = $(this).data("action");
    var actionTarget = $(this).data("target");
    var actionSubject = $(this).data("subject");
    $(actionTarget).trigger('click', actionSubject);
});
$('.abc').on('click', function () {
    $('#result').text($(this).text() + this.classList + $(this).index('.abc'));
});

【讨论】：