需要帮助来创建jQuery脚本

Question

我需要创建jQuery脚本的帮助。 首先，让我解释一下目标，这是一个Web应用程序，该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>

我需要脚本将点击的基部ID +头部的ID带到=自定义工具。 例如，作为用户，我选择基数1，然后选择头4，然后显示自定义工具8。

任何帮助，将不胜感激！

Answer 1

这是一个显示我认为可能会有所帮助的jsfiddle。 http://jsfiddle.net/andyzinsser/GSzjb/

主要代码：

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();
});