使用json填充切換案例數據我試圖使用json添加切換案例

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循環和如果

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創建「菜單」和腳本（因爲我沒有菜單/列表的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')); 
});