如何在同一页面中两次使用 JQuery 函数？

Question

我不是很擅长编码，但我最终还是为我的办公室做了一些事情。

我目前正在构建一个手风琴，其中包含来自 json 的一些信息。我使用从互联网上获得的 JQuery 代码来构建它。

问题是我试图在同一个 HTML 页面中两次调用这个 JQuery 函数，用两个不同的 json 数据构建两个不同的手风琴集。

我试过更改 JQuery，调用一个“accordion.init()”和另一个“accordion2.init()”，有几种不同的变体，但没有成功。

我的 html 非常直截了当：

<script src="fase2.js"></script>
<div class="container">
<section class="accordion"></section> 
</div>

以及HTML继承的js文件：

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.log(accordionData2[0]['Logo'] 的内容，js 代码将在我的 json.

中为徽标提供肯定的结果

你能帮我理解哪里不对吗？

obs：手风琴正确加载，只有一个 jQuery 被调用。 obs2：使用我在这里发布的代码，来自第二个 json 的数据与第一个手风琴一起加载，一个手风琴在另一个之上。我想上面的错误只会在第一个 json 数据结束后出现（第一个 json 索引小于第二个）

Answer 1

我会做：

    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") 的内容，这样选择器将只触及启动器的最近元素，而不是全部

如何在同一页面中两次使用 JQuery 函数？

How to use a JQuery function twice in the same page?

javascript

html

jquery

accordion