Need help creating a jQuery script

Question

I need help creating a jQuery script. Let me start off by explaining the goal this is a web app that displays a customized tool after selecting a base part then a head part. Here is the html I created for it.

<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>

I need the script to take the clicked id of the base + id of the head to = a custom tool. Example, being I as the user select base 1 then I select head 4 then it displays Custom tool 8.

Any help with this would be much appreciated!

Sorry here is a clearer example. If the user selected base 1 + head 1 would = custom tool 1 . The ID for base 1 is A + head 1 ID is 1 the script would combine the IDs making it A1 if A1 is true then display Custom tool 1 inside of displyContent div. I hope that better clearified what I'm trying to accomplish. — Jon
– Jon, Commented Feb 22, 2013 at 4:32

andyzinsser · Accepted Answer · 2013-02-22 04:16:17Z

1

Here is a jsfiddle showing something that I think might help. http://jsfiddle.net/andyzinsser/GSzjb/

main piece of code:

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

answered Feb 22, 2013 at 4:16

andyzinsser

2,5232 gold badges18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jon Over a year ago

Ok so I added some adjustments and this work perfectly thank you. If you would like to see them jsfiddle.net/GSzjb/6

Collectives™ on Stack Overflow

Need help creating a jQuery script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related