Zapełnianie danych obudowy przełącznika za pomocą json

Question

Próbuję dodać obudowy przełączników za pomocą json. Jak mogę wypełnić dane?

Jest to oczekiwany wynik:

$(".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; 
    } 
}); 

to strukturę:

$(".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

Nie jesteś pewien, czy chcesz użyć obudowy przełącznika. można użyć pętli for i jeśli

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]); 
} 

Uwaga: pamiętać o this nie oceni, chyba że jest wewnątrz funkcji określonym powyżej

EDIT: wersja obudowy przełącznika za pomocą eval. Należy pamiętać używając eval jest mile widziana

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

To by uruchomić kod w zasięgu globalnym ale zbudować ciąg w formacie kodu ty opisujący

Answer 2

Po pierwsze, przełącznik nie będzie działać jako zademonstrowałeś, więc użyłem obu elementów tablicy, aby to stworzyć.

TERAZ: To jest bardzo brzydkie, a nie moje zalecenie, ale aby to zrobić, musisz dodać skrypt do DOM po jego utworzeniu.

Najpierw pracuję przez JSON, aby utworzyć "menu" i skrypt (ponieważ nie miałem twojego HTMLa dla menu/listy).

Oto skrzypce pokazać to działa: enter link description here

Kod:

// 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

jest to właściwa metoda, aby obsłużyć te rzeczy typu: skrzypce przykład: 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')); 
});