- 13, May 2024
- #1
У меня есть функция щелчка, которая работает для одного из моих тегов привязки, но я хочу, чтобы она работала для двух (или более). Когда я нажимаю на якорь с идентификатором get-data-1, он отображает json-файл microLesson1.json для div с классом quiz-list-1. Я хочу, чтобы он отображал json-файл microLesson2.json, когда я также нажимаю на якорь с идентификатором get-data-2.
{
"Quiz 1": "70%",
"Quiz 2": "50%",
"Quiz 3": "90%",
"Quiz 3": "80%",
"Quiz 3": "60%"
}
Код (разметка): microLesson1.json
{ "Quiz 1": "80%", "Quiz 2": "100%", "Quiz 3": "90%" }
Код (разметка): microLesson2.json
<!DOCTYPE html> <html> <head> <title>Test</title> <script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL2NvZGUuanF1ZXJ5LmNvbS9qcXVlcnktMS4xMC4yCMx']https://code.jquery.com/jquery-1.10.2.js[/URL]"></script> <style> table.my-new-list { width: 20%; } </style> </head> <body> <a href="#" id="get-data-1">MicroLesson 1</a><br /> <a href="#" id="get-data-2">MicroLesson 2</a> <div class="quiz-list-1"></div> <div class="quiz-list-2"></div> <script> $(document).ready(function() { $('#get-data-1').click(function () { $.getJSON( "ajax/microLesson1.json", function( data ) { var items = []; $.each( data, function( key, val ) { items.push( "<tr><td>" + key + "</td><td>" + val + "</td></tr>" ); }); $( "<table />", { "class": "my-new-list", html: items.join( "" ), }).appendTo( ".quiz-list-1" ); }); }); }); </script> </body> </html>
Код (разметка):