Выполнение вызова Json

DI_KEY

У меня есть функция щелчка, которая работает для одного из моих тегов привязки, но я хочу, чтобы она работала для двух (или более). Когда я нажимаю на якорь с идентификатором 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>

Код (разметка):

MR-Servers.com

Добавьте класс, инициируйте щелчок по классу, получите идентификатор выбранного элемента, извлеките число, динамически добавьте это число в json-вызов и готово. Что-то вроде этого должно помочь

 


<body>


<a href="#" id="get-data-1" class="fetchjson">MicroLesson 1</a><br />


<a href="#" id="get-data-2" class="fetchjson">MicroLesson 2</a>


<div class="quiz-list-1"></div>


<div class="quiz-list-2"></div>


<script>


$(document).ready(function() {


$('.fetchjson').click(function () {


var idNumber = $(this).attr('id').split('-').reverse()[0];


$.getJSON( "ajax/microLesson"+idNumber+".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-"+idNumber+"" );


});


});


});


</script>

Код (разметка):

Похожие темы	Дата
Практика И Эффективность Javascript	19.10.2024, 18:10
[WebForMyself] Библиотека JQuery UI (User Interface) (2018)	19.10.2024, 18:10
Этан Браун - Изучаем JavaScript. Руководство по созданию современных веб-сайтов	19.10.2024, 18:10
David Flanagan "JavaScript: The Definitive Guide, 7th Edition" (2020) [PDF] [EN]	19.10.2024, 18:10
Vanilla JS получает все ссылки в пределах диапазона, используя цикл XPath и foreach	19.10.2024, 18:10
Как заставить кнопку снова запускать функцию после того, как окно возьмет на себя управление ею	19.10.2024, 18:10
Программное обеспечение для теоремы о 4 цветах	19.10.2024, 18:10
Изменить порядок массива объектов	19.10.2024, 18:10
Изотоп и лайтбокс: как показывать в лайтбоксе только видимые (отфильтрованные) изображения	19.10.2024, 18:10
Как видео на YouTube начинают воспроизводиться автоматически	19.10.2024, 18:10

Выполнение вызова Json

DI_KEY

MR-Servers.com

I AM

Интересно