需要幫助創建一個jQuery腳本

Question

我需要幫助創建一個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> 

我需要腳本將頭部的base + 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(); 
});