Javascript 需要帮助创建jQuery脚本吗

我需要帮助创建jQuery脚本。让我首先解释一下目标这是一个web应用程序，它在选择基础零件然后是头部零件后显示自定义工具。这是我为它创建的html

<div>Base List</div>
<div id="baseSection">
    <ul class="selectable">
        <li id="a">1</li>
        <li id="b">2</li>
        <li id="c">3</li>
        <li id="d">4</li>
    </ul>
</div>

<div>Head List</div>
<div id="headSection">
    <ul class="selectable">
        <li id="1">1</li>
        <li id="2">2</li>
        <li id="3">3</li>
        <li id="4">4</li>
        <li id="5">5</li>
        <li id="6">6</li>
        <li id="7">7</li>
        <li id="8">8</li>
    </ul>
</div>

<!--//This content below will be hidden//-->
<div id="content-1">Custom tool 1</div>
<div id="content-2">Custom tool 2</div>
<div id="content-3">Custom tool 3</div>
<div id="content-4">Custom tool 4</div>
<div id="content-5">Custom tool 5</div>
<div id="content-6">Custom tool 6</div>
<div id="content-7">Custom tool 7</div>
<div id="content-8">Custom tool 8</div>
<div id="content-9">Custom tool 9</div>
<div id="content-10">Custom tool 10</div>
<div id="content-11">Custom tool 11</div>
<div id="content-12">Custom tool 12</div>
<div id="content-13">Custom tool 13</div>
<div id="content-14">Custom tool 14</div>
<div id="content-15">Custom tool 15</div>
<div id="content-16">Custom tool 16</div>
<div id="content-17">Custom tool 17</div>
<div id="content-18">Custom tool 18</div>
<div id="content-19">Custom tool 19</div>
<div id="content-20">Custom tool 20</div>
<div id="content-21">Custom tool 21</div>
<div id="content-22">Custom tool 22</div>
<div id="content-23">Custom tool 23</div>
<div id="content-24">Custom tool 24</div>
<div id="content-25">Custom tool 25</div>
<div id="content-26">Custom tool 26</div>
<div id="content-27">Custom tool 27</div>
<div id="content-28">Custom tool 28</div>
<div id="content-29">Custom tool 29</div>
<div id="content-30">Custom tool 30</div>
<div id="content-31">Custom tool 31</div>
<div id="content-32">Custom tool 32</div>
<!--//This div will not be hidden and will display the result//-->
<div id="displyContent"></div>

基本列表

1
2
3
4

总名单

1
2
3
4
5
6
7
8

自定义工具1
自定义工具2
自定义工具3
自定义工具4
自定义工具5
自定义工具6
自定义工具7
定制工具8
自定义工具9
自定义工具10
自定义工具11
定制工具12
自定义工具13
定制工具14
定制工具15
定制工具16
自定义工具17
定制工具18
自定义工具19
定制工具20
自定义工具21
定制工具22
定制工具23
定制工具24
定制工具25
自定义工具26
定制工具27
定制工具28
自定义工具29
定制工具30
自定义工具31
自定义工具32

我需要脚本将单击的base的id+head的id转换为一个自定义工具。例如，当用户选择base 1时，我选择head 4，然后显示自定义工具8

---

在此方面的任何帮助都将不胜感激

下面是一个jsfiddle，它展示了一些我认为可能有用的东西

主要代码：

var tool_ids = [{tool_id: 1}, {tool_id: 2}, {tool_id: 3}, {tool_id: 4}, {tool_id: 5}, {tool_id: 6}, {tool_id: 7}, {tool_id: 8}, {tool_id: 9}, {tool_id:10}, {tool_id:11}, {tool_id:12}, {tool_id:13}, {tool_id:14}, {tool_id:15}, {tool_id:16}, {tool_id:17}, {tool_id:18}, {tool_id:19}, {tool_id:20}, {tool_id:21}, {tool_id:22}, {tool_id:23}, {tool_id:24}, {tool_id:25}, {tool_id:26}, {tool_id:27}, {tool_id:28}, {tool_id:29}, {tool_id:30}, {tool_id:31}, {tool_id:32}];

// These get set once you click on an number in either the base or head sections
var baseSelection;
var headSelection;

// places the current selections in a div
var updateTool = function() {
    $("#displayContent").html("Base: " + baseSelection + ", " + "Head: " + headSelection);
};

// When you click a number in the base section, save the selection
$('#baseSection').on('click', 'li', function(event) {
    baseSelection = $(this).html();
    updateTool();
});

// When you click a number in the head section, save the selection
$("#headSection").on('click', 'li', function(event) {
    headSelection = $(this).html(); 
    updateTool();
});

---

为什么单击底部1和头部4会得到工具8？抱歉，这里有一个更清楚的示例。如果用户选择基准1+头部1将=自定义工具1。base 1的ID是+头1 ID是1脚本将组合ID使其为A1如果A1为真，则在displaycontent div中显示自定义工具1。我希望更好地澄清我试图完成的内容。好的，因此我添加了一些调整，这项工作非常感谢您。如果你想看的话