Javascript 嵌入单选按钮

我想在更多单选按钮中嵌入单选按钮，如下所示：

fiddle的行为与我所希望的完全一样，但是它似乎只是一个2x3网格的代码很多，我计划至少有一个3xN网格（3层N个按钮，每个按钮至少有10个，但如果用户继续滚动，则更多）。。。所以我想知道是否有人知道/可以想出更有效的方法来做这件事。（使用php和/或javascript和/或jquery和/或jquery UI）

（我是一名javascript&jquery noob，从昨天开始（自学）学习，因此如果您能对技术术语温和一些，并尽可能多地解释，我将不胜感激）

提前谢谢

小提琴中的javascript代码：

// main buttons
$(document).ready(function(){
    $(".ap").click(function(){
        $(".a").toggle();
        $(".b").hide();
        $(".c").hide();
        $(".a.l").hide();
    });
});

$(document).ready(function(){
    $(".bp").click(function(){
        $(".a").hide();
        $(".b").toggle();
        $(".c").hide();
        $(".b.l").hide();
    });
});

$(document).ready(function(){
    $(".cp").click(function(){
        $(".a").hide();
        $(".b").hide();
        $(".c").toggle();
        $(".c.l").hide();
    });
});

//secondary buttons
//a
$(document).ready(function(){
    $(".a1").click(function(){
        $(".a1.l").toggle();
        $(".a2.l").hide();
        $(".a3.l").hide();
    });
});
$(document).ready(function(){
    $(".a2").click(function(){
        $(".a1.l").hide();
        $(".a2.l").toggle();
        $(".a3.l").hide();
    });
});
$(document).ready(function(){
    $(".a3").click(function(){
        $(".a1.l").hide();
        $(".a2.l").hide();
        $(".a3.l").toggle();
    });
});
//b
$(document).ready(function(){
    $(".b1").click(function(){
        $(".b1.l").toggle();
        $(".b2.l").hide();
        $(".b3.l").hide();
    });
});
$(document).ready(function(){
    $(".b2").click(function(){
        $(".b1.l").hide();
        $(".b2.l").toggle();
        $(".b3.l").hide();
    });
});
$(document).ready(function(){
    $(".b3").click(function(){
        $(".b1.l").hide();
        $(".b2.l").hide();
        $(".b3.l").toggle();
    });
});
//c
$(document).ready(function(){
    $(".c1").click(function(){
        $(".c1.l").toggle();
        $(".c2.l").hide();
        $(".c3.l").hide();
    });
});
$(document).ready(function(){
    $(".c2").click(function(){
        $(".c1.l").hide();
        $(".c2.l").toggle();
        $(".c3.l").hide();
    });
});
$(document).ready(function(){
    $(".c3").click(function(){
        $(".c1.l").hide();
        $(".c2.l").hide();
        $(".c3.l").toggle();
    });
});

---

在下面生成html，这样您就可以处理3xN行，您需要弹出到javascript中显示为

//此处

的数组中，并相应地生成html

$（文档）.ready（函数（）{
变量组=['a'，'b'，'c']；
//创建简单的js数组也用于DOM操作
$.each（组、函数（k、id）{
//循环组数组我们刚刚创建的id变量包含a、b和c
$（'#'+id）.hide（）；
//将计算为$（'a'）。隐藏（）；
$（'#'+id+'l'）.hide（）；
//将计算为$（'#al'）。隐藏（）；
});
$（“.button”）。单击（函数（）{
//类名为“button”的DOM项上的绑定单击事件
var按钮_id=$（this）.data（'id'）；
/*$（这）将让我们知道每个月都单击了哪个按钮
在具有button类的DOM项上发生时间单击事件
和$（this）.data（id）；将获得单击按钮的数据id属性*/
$（'#'+按钮id）.toggle（）；//toogle
var hide=$.grep（组，函数（值）{
// http://api.jquery.com/jquery.grep/
返回值！=按钮id；
});
$.each（隐藏，函数（k，id）{
// http://api.jquery.com/each/
$（'#'+id）.hide（）；
});
});
变量选择器=[]；//初始化空白数组
$。每个（组，功能（k）{
选择器.push（'.'+组[k]）；
/*用一个额外的按钮推送组数组的元素。
所以，.a.b和.c*/
});
//将数组元素与，
selector=selector.join（'，'）；
//现在选择器是字符串，具有值.a、.b、.c
// https://api.jquery.com/category/selectors/
$（选择器）。单击（函数（）{
//将事件绑定到我们刚刚创建的字符串，按照上面的链接了解更多信息
var button_id=$（this）.data（'id'）；//单击了按钮的数据id属性
var class_id=$（this）.attr（'class'）；//单击按钮的类
var flag=$（'.+class_id+'l'）。过滤器（'[data id=“'+button_id+'”]）。是（':visible'）；
/*对于以后的使用，如果具有匹配筛选条件的元素在DOM中可见，则为true，
否则就错了*/
$.each（组、函数（k、id）{
$（'#'+id+'l'）.children（）.hide（）；
// https://api.jquery.com/children/
});
$.each（组、函数（k、id）{
$（'#'+id+'l'）.hide（）；
});
$（'#'+class_id+'l'）.show（）；
国际单项体育联合会（旗）
$（'.'.+class_id+'l'）。过滤器（'[data id=“'+button_id+'”）。隐藏（）；
其他的
$（'.'.+class_id+'l'）.filter（'[data id=“'+button_id+''']”）.show（）；
});
});

切换
切换b
切换c
切换a1
切换a2
切换a3
切换b1
切换b2
切换b3
切换c1
切换c2
切换c3
这是a1线
这是a2线
这是a3线
这是b1线
这是b2线
这是b3线
这是c1线
这是c2线
这是c3线
1。使用
$（document）.ready（）
事件一次。2.如果你有一个在代码中重复的功能——考虑写一个函数并调用它，而不是一遍又一遍的写同样的代码。谢谢。它几乎满足了我的需要，除了一件事：例如，如果我单击按钮A，然后单击按钮A1，然后单击按钮B（或者再次单击按钮A），“这是A1行”div不会消失。我目前正在尝试理解您的javascript代码，这样我就可以解决这个问题，因为我想理解它以更好地使用javascript，但这对我来说非常复杂。如果您能花点时间来修复它和/或注释JS代码以帮助我理解每一行的功能，我将不胜感激。因此，我能够理解代码的一部分并通过添加这两行来修复它：
15:$（'#'+按钮id+'l'）。hide（）和
23:$（'#'+id+'l'）.hide（）。我仍然不明白
28:var选择器=[]之后会出现什么行，如果您能对代码进行注释以帮助我理解，我将不胜感激！无论如何，非常感谢您的帮助。此外，如果我是对的，这适用于2xN按钮，但它仍然需要对3xN按钮进行调整，对吗？在这里，伙计，请看我编辑的答案，我还添加了此代码以改进codereview，如果您想查看它的话。是的，我把这个bug留给你作为练习：），我无法理解2xN的意思，如果你能给我看一把4xN的小提琴，我能理解。