javascript - 需要帮助创建 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>

我需要脚本将基础的单击 id + 头部的 id 设置为自定义工具。例如，我作为用户选择 base 1 然后我选择 head 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();
});