我正在使用 JSON2HTML 库来生成 HTML。我遇到了 onclick 问题。以下是代码片段
**JavaScript**
var data =[
{
"testSuite":[
{
"testCase":[
{
"testCaseName":"Login Succesfull TC (nested error)",
"testCaseResult":"false",
"testCaseScreenShot":"image",
"testCaseTimeStamp":"0:00:13.258",
"testStep":[
{
"testStepresult":"true",
"testStepName":"ub_cti_inputText - TC (nested error)",
"testStepScreenShot":"image",
"testStepTimeStamp":"0:00:13.258",
},
{
"testStepresult":"true",
"testStepName":"ub_cti_inputText1111111111 - TC (nested error)",
"testStepScreenShot":"image",
"testStepTimeStamp":"0:00:13.258",
},
{
"testStepresult":"false",
"testStepName":"ub_cti_inputText - TC (nested error)",
"testStepScreenShot":"image",
"testStepTimeStamp":"0:00:13.258",
}
] //End of TestStep
},
], // End of testSuite1
"testSuiteName":"LoginAndTicketStatus_suite - TS (nested error)",
"testSuiteResult":"false",
"testSuiteTimeStamp":"0:00:15.238"
},
] //End of TestSuite JSON
},
]; //End of data
var transform = {
"testSuite": {
"tag": "ul",
"children": function () {
return (json2html.transform(this.testSuite, transform.getTestSuiteName));
}
},
"getTestSuiteName": {
"tag": "li",
"nowrap":"true",
"class":"closed",
"children":[
{"tag":"a","href":"#testSuiteLink",
"onclick":
function()
{
$(this).toggleClass('closed');
$(this).toggleClass('open');
toggle(this);
},
"children":[
{"tag":"big",
"children":[
//Apply font color for result of testSuite
{"tag":"font",
"color":function()
{
if(data[0].testSuite[0].testSuiteResult=="true")
{
return "Green";
}
else
{
return "red";
}
},
"html": "${testSuiteName}",
},
]
}]
},
{"tag":"ul","children":function()
{
return ( json2html.transform(this.testCase, transform.testCase));
}
}]
},
"testCase": {
"tag": "li",
"nowrap":"true",
"class":"closed",
"children":[
{
"tag":"a","href":"#testcase","onclick": function()
{
$(this).toggleClass('closed');
$(this).toggleClass('open');
toggle(this);
},
"children":[
{"tag":"big","children":[
{"tag":"font","color":function()
{
if(this.testCaseResult=="true")
{
return "Green";
}
else
{
return "red";
}
},"html":function()
{
return this.testCaseName;
}}
]}
]},
{"tag":"ul","children":function()
{
return ( json2html.transform(this.testStep, transform.testStep) );
}
}]
},
"testStep": {
"tag": "li",
"nowrap":"true",
"class":"closed",
"onclick":function()
{
$(this).toggleClass('closed');
$(this).toggleClass('open');
toggle(this);
},
"children":[
{"tag":"a","href":"#testcase","onclick": function()
{
$(this).toggleClass('closed');
$(this).toggleClass('open');
toggle(this);
},
"children":[
{"tag":"big","children":[
{"tag":"font","color":function()
{
if(this.testStepresult=="true")
{
return "green";
}
else
{
return "red";
}
},"html":function()
{
for(element in this) {
console.log("Element received "+element+" -----44");
return this.testStepName ;
}
}
}
]}
]} ,
{"tag":"ul","children":[
{
"tag":"li","nowrap":"true","class":"closed","children":[
{
"tag":"a","href":"#step","onclick":function()
{
$(this).toggleClass('closed');
$(this).toggleClass('open');
toggle(this);
},"children":[
{"tag":"big","children":[
{"tag":"font","color":function()
{
if(this.testStepresult=="true")
{
return "Green";
}
else
{
return "red";
}
},"html":function()
{
return this.testStepresult ;
}
}
]}
]}
]}
]}
]},
}; //End of HTML template definition(transform)
$(document).ready(function()
{
$('#json').json2html(data, transform.testSuite);
});**Css Styling**
body { font-family: monospace; }
ul.report,
ul.report ul,
ul.report li { margin: 0; padding: 0; }
ul.report ul { padding-left: 1em; }
ul.report li a { text-decoration: none; }
a {
text-decoration: none;
}
li::before {
content: "⊞"
}
ul.report li { list-style: none; }
{
list-style-type: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://json2html.com/js/jquery.json2html.js"></script>
<script src="http://json2html.com/js/json2html.js"></script>
**HTML**
<div id="json" style="width:95%;margin:5%"></div>预期输出:
单击 LoginAndTicketStatus_suite - TS(嵌套错误)切换登录成功 TC(嵌套错误)
点击登录成功 TC(嵌套错误)切换 ub_cti_inputText - TC(嵌套错误)、ub_cti_inputText1- TC(嵌套错误)、ub_cti_inputText - TC(嵌套错误)。
非常感谢任何帮助!
最佳答案
首先，您可能想尝试将 JSON 转换组织成更易读的格式。
现在回答您的问题，因为您在转换中嵌套了核心 json2html.transform，所以您需要确保它知道要处理事件。您可以通过在选项中指定 {events:true} 来做到这一点
return (json2html.transform(this.testSuite, transform.getTestSuiteName,{'events':true}));
这告诉核心库处理 jquery 事件。否则，您可以像这样在虚拟 div 元素上调用 jquery 插件
return ($('div').json2html(this.testSuite, transform.getTestSuiteName));
这是更新后的代码，可以正确调用这些事件(使用两种不同的方法)
var transform = {
"testSuite": {
"tag": "ul",
"children": function () {
return ($('div').json2html(this.testSuite, transform.getTestSuiteName));
}
},
"getTestSuiteName": {
"tag": "li",
"nowrap":"true",
"class":"closed",
"children":[
{"tag":"a","href":"#testSuiteLink",
"onclick":
function()
{
$(this).toggleClass('closed');
$(this).toggleClass('open');
toggle(this);
},
"children":[
{"tag":"big",
"children":[
//Apply font color for result of testSuite
{"tag":"font",
"color":function()
{
if(data[0].testSuite[0].testSuiteResult=="true")
{
return "Green";
}
else
{
return "red";
}
},
"html": "${testSuiteName}",
},
]
}]
},
{"tag":"ul","children":function()
{
return ( json2html.transform(this.testCase, transform.testCase,{'events':true}));
}
}]
},
"testCase": {
"tag": "li",
"nowrap":"true",
"class":"closed",
"children":[
{
"tag":"a","href":"#testcase","onclick": function()
{
$(this).toggleClass('closed');
$(this).toggleClass('open');
toggle(this);
},
"children":[
{"tag":"big","children":[
{"tag":"font","color":function()
{
if(this.testCaseResult=="true")
{
return "Green";
}
else
{
return "red";
}
},"html":function()
{
return this.testCaseName;
}}
]}
]},
{"tag":"ul","children":function()
{
return ( json2html.transform(this.testStep, transform.testStep,{'events':true}) );
}
}]
},
"testStep": {
"tag": "li",
"nowrap":"true",
"class":"closed",
"onclick":function() {
console.log('here');
$(this).toggleClass('closed');
$(this).toggleClass('open');
toggle(this);
},
"children":[
{"tag":"a","href":"#testcase","onclick": function()
{
$(this).toggleClass('closed');
$(this).toggleClass('open');
toggle(this);
},
"children":[
{"tag":"big","children":[
{"tag":"font","color":function()
{
if(this.testStepresult=="true")
{
return "green";
}
else
{
return "red";
}
},"html":function()
{
for(element in this) {
console.log("Element received "+element+" -----44");
return this.testStepName ;
}
}
}
]}
]} ,
{"tag":"ul","children":[
{
"tag":"li","nowrap":"true","class":"closed","children":[
{
"tag":"a","href":"#step","onclick":function()
{
$(this).toggleClass('closed');
$(this).toggleClass('open');
toggle(this);
},"children":[
{"tag":"big","children":[
{"tag":"font","color":function()
{
if(this.testStepresult=="true")
{
return "Green";
}
else
{
return "red";
}
},"html":function()
{
return this.testStepresult ;
}
}
]}
]}
]}
]}
]},
}; //End of HTML template definition(transform)
关于javascript - 如何在json2html中使用onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36130764/