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

  • Автор темы DI_KEY
  • Обновлено
  • 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

Тем
60

Постов
201

Баллов
531
  • 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

Тем
60

Постов
201

Баллов
541
Тем
403,760
Комментарии
400,028
Опыт
2,418,908

Интересно