Я не особо силен в программировании, но в конце концов делаю кое-что для своего офиса.
В настоящее время я создаю аккордеон, который несет некоторую информацию из json. Я использую код JQuery, который я нашел в Интернете, чтобы построить его.
Проблема в том, что я пытаюсь дважды вызвать эту функцию JQuery на одной и той же HTML-странице, создавая два разных набора аккордеонов с двумя разными данными json.
Я попытался изменить JQuery, вызвав один "accordion.init()" и другой "accordion2.init()" с несколькими различными вариантами, но безуспешно.
Мой html довольно прямолинеен:
<script src = "fase2.js"></script>
<div class = "container">
<section class = "accordion"></section>
</div>
И файл js, который наследует HTML:
jQuery(document).ready(function($){
var accordion = {
init:function(){
this.accordionJson='fase2.json';
this.getData();
},
getData:function(){
$.ajax({
url:accordion.accordionJson,
success:function(data){
var dataBlock=data.data;
accordion.iterateAccordionData(dataBlock);
accordion.hideAccordion();
}
});
},
iterateAccordionData:function(accordionData){
for(i=0;i<accordionData.length;i++){
$(".accordion").append("<article>");
}
accordion.appendAccordionContent(accordionData);
},
appendAccordionContent:function(accordionData){
$('article').each(function(index){
$('article').eq(index).append('<h2><img src= "' + accordionData[index]['Logo'] +'">' + accordionData[index]['FriendlyName'] + '<span> #'+ accordionData[index]['index'] + '</span></h2>');
$('article').eq(index).append('<p><span>Role</span>:<br>' + accordionData[index]['Roles']+ '</p>')
$('article').eq(index).append('<p><span>APIs:</span><br>'+accordionData[index]['ApiFamilyType']+'</p>');
$('article').eq(index).append('<p><span>Endpoints:</span><br>'+accordionData[index]['ApiEndpoints']+'</p>');
$('article').eq(index).append('<p><span>Organisation:</span><br>'+accordionData[index]['OrganisationName']+'</p>');
});
},
hideAccordion:function(){
$('p').hide();
accordion.toggleAccordion();
},
toggleAccordion:function(){
$('article').on('click',function(){
$(this).find('p').slideToggle();
$(this).toggleClass('active');
});
},
};
accordion.init();
});
То, что я пытался сделать, это вызвать второй файл js с разными именами для большинства переменных:
jQuery(document).ready(function($){
var accordion2 = {
init:function(){
this.accordionJson='fase2-n.json';
this.getData();
},
getData:function(){
$.ajax({
url:accordion2.accordion2Json,
success:function(data){
var dataBlock=data.data;
accordion2.iterateAccordionData(dataBlock);
accordion2.hideAccordion();
}
});
},
iterateAccordionData:function(accordionData2){
for(i=0;i<accordionData2.length;i++){
$(".accordion").append("<article>");
}
accordion2.appendAccordionContent(accordionData2);
},
appendAccordionContent:function(accordionData2){
$('article').each(function(index){
$('article').eq(index).append('<h2><img src= "' + accordionData2[index]['Logo'] +'">' + accordionData2[index]['CustomerFriendlyName'] + '<span> #'+ accordionData2[index]['index'] + '</span></h2>');
$('article').eq(index).append('<p><span>Role ITP</span>:<br>' + accordionData2[index]['Roles']+ '</p>')
$('article').eq(index).append('<p><span>Família de APIs publicadas:</span><br>'+accordionData2[index]['ApiFamilyType']+'</p>');
$('article').eq(index).append('<p><span>Endpoints publicados:</span><br>'+accordionData2[index]['ApiEndpoints']+'</p>');
$('article').eq(index).append('<p><span>Organizações que utilizam está marca:</span><br>'+accordionData2[index]['OrganisationName']+'</p>');
});
},
hideAccordion:function(){
$('p').hide();
accordion2.toggleAccordion();
},
toggleAccordion:function(){
$('article').on('click',function(){
$(this).find('p').slideToggle();
$(this).toggleClass('active');
});
},
};
accordion2.init();
});
Но я получаю ошибку:
Uncaught TypeError: Cannot read properties of undefined (reading 'Logo') at HTMLElement. (fase2-n.js:25:88)
что это за строка:
$('article').eq(index).append('<h2>imgsrc = "'+accordionData2[index]'Logo']+'">'+accordionData2[index]['CustomerFriendlyName']+'<span>#'+accordionData2[index]['index']+'</span></h2>');
Эта ошибка сбивает меня с толку, потому что если я напечатаю что-то вроде: console.info(accordionData2[0]['Logo']
, код js даст мне положительный результат для логотипа в моем json.
Не могли бы вы помочь мне понять, что не так?
obs: аккордеон загружается правильно только с одним вызовом jQuery. obs2: с кодом, который я разместил здесь, данные из второго json загружаются вместе с первым аккордеоном, один аккордеон поверх другого. Я предполагаю, что ошибка выше появляется только после того, как заканчиваются первые данные json (первый индекс json меньше второго)
Я бы сделал:
jQuery(document).ready(function($){
var accordion = {
init:function(jsonFile){
this.accordionJson= jsonFile ;
this.getData();
},
getData:function(){
$.ajax({
url:accordion.accordionJson,
success:function(data){
var dataBlock=data.data;
accordion.iterateAccordionData(dataBlock);
accordion.hideAccordion();
}
});
},
iterateAccordionData:function(accordionData){
for(i=0;i<accordionData.length;i++){
$(".accordion").append("<article>");
}
accordion.appendAccordionContent(accordionData);
},
appendAccordionContent:function(accordionData){
$('article').each(function(index){
$('article').eq(index).append('<h2><img src= "' + accordionData[index]['Logo'] +'">' + accordionData[index]['FriendlyName'] + '<span> #'+ accordionData[index]['index'] + '</span></h2>');
$('article').eq(index).append('<p><span>Role</span>:<br>' + accordionData[index]['Roles']+ '</p>')
$('article').eq(index).append('<p><span>APIs:</span><br>'+accordionData[index]['ApiFamilyType']+'</p>');
$('article').eq(index).append('<p><span>Endpoints:</span><br>'+accordionData[index]['ApiEndpoints']+'</p>');
$('article').eq(index).append('<p><span>Organisation:</span><br>'+accordionData[index]['OrganisationName']+'</p>');
});
},
hideAccordion:function(){
$('p').hide();
accordion.toggleAccordion();
},
toggleAccordion:function(){
$('article').on('click',function(){
$(this).find('p').slideToggle();
$(this).toggleClass('active');
});
},
};
accordion.init('fase2.json');
accordion.init('fase3.json');
});
И тогда у вас может быть одна единственная функция, отправляющая имя файла в реквизитах init(). Если вам нужно, чтобы одновременно работало более одного аккордеона, вы должны заменить $("article") на что-то вроде $(this).find("article"), чтобы селектор касался только ближайшего элемента инициатора, а не все они
Да, конечно, вы можете вызвать его, добавив: onclick = "accordion.init('file.json')" к элементу, который вы хотите инициировать. Или просто поместите имя json в качестве реквизита в такой элемент, как: id = "fase2", и добавьте класс к каждому элементу, который запускает функцию: class = "accordion-push", а затем с помощью jquery выполните: $(" .accordion-push").click( () =>{accordion.init($(this).attr("id")+".json" ) } );
Привет Лусио. С некоторыми изменениями мне удалось применить что-то похожее на ваши идеи. Что я сделал, так это создал приложение аккордеона для каждого случая и использовал идентификаторы для его идентификации. Таким образом, я могу использовать ядро функции, как в исходном коде, и добавлять только определенные дополнения для каждого нужного мне аккордеона. Спасибо за помощь!
Привет Лусио. Я понимаю, что могу передавать различные параметры в файл ACcordion.init, и мне кажется, что это правильный путь. Остается вопрос: могу ли я передать эти параметры из html, чтобы я мог вызвать аккордеон. fase3.json')?