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

  • Автор темы DI_KEY
  • 33
  • Обновлено
  • 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>
Код (разметка):

DI_KEY


Рег
06 Jun, 2012

Тем
1

Постов
2

Баллов
12
  • 11, Jun 2024
  • #2
Добавьте класс, инициируйте щелчок по классу, получите идентификатор выбранного элемента, извлеките число, динамически добавьте это число в 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>

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

MR-Servers.com


Рег
13 Jun, 2014

Тем
1

Постов
3

Баллов
13
Тем
49554
Комментарии
57426
Опыт
552966

Интересно