javascript - 单击 jquery 中的按钮更改内容

Question

所以我的场景是这样的:

我有 3 种项目要在 div 中显示。 div 顶部有三个按钮，当用户单击任何按钮时，将显示与该项目对应的项目。

项目来自后端，我正在页面加载时加载所有项目，因为我还需要它们在同一上下文中的其他地方。

目前我正在遵循相同的显示隐藏方法。我想知道是否有任何其他方法在代码优化方面可以比这更好。用户还可以编辑/添加/删除项目吗？这是我的fiddle

$(document).ready(function(){
    console.log($('.toggleItems'));
    $('.toggleItems').click(function(){
        $('.containers').hide();  
        var identifier = $(this).data('identifier');
        console.log(identifier);
        $('#'+identifier).show();
    });
})

Answer 1

首先按项目排序，然后使用 Accordion jquery