需要幫助來創建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();
});