Question

我正在尝试使用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
     }
});

JQ

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"] ]

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

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

Answer 2

首先，开关将无法正常工作，因此我使用了两个数组元素来创建它。

现在：这是超级丑陋而不是我的推荐，但为了做到这一点，你需要在创建它之后将脚本附加到DOM。

首先，我通过JSON来创建＆＃34;菜单＆＃34;和脚本（因为我没有菜单/列表的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'));
});

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

使用json填充switch case数据

3 个答案: