Somename Somename - 1 year ago 57
Javascript Question

How to create a jquery function for li

So I have created a div with a

that holds the list of the filters and when any
us clicked it shows the corresponding filters.

The following doesnt look very promising:


How can I create a function so that when a
from the 'selectul' div is clicked the respective results are displayed in the 'optionsdiv'.

Many thanks.

Answer Source

I would annotate each of your li elements like so :

<li class="clickable" data-field="1"><div class="itemslist">Field1</div></li>
<li class="clickable" data-field="2"><div class="itemslist">Field2</div></li>
<li class="clickable" data-field="3"><div class="itemslist">Field3</div></li>
<li class="clickable" data-field="4"><div class="itemslist">Field4</div></li>
<li class="clickable" data-field="5"><div class="itemslist">Field5</div></li>

and make your checkbox sections like so :

<div class="Field1 Field">
<h3>Options for Field1</h3>
<input type = "checkbox" value="1" />option1
<input type = "checkbox" value="2">option2
<input type = "checkbox" value="3">option3
<li><div class="Field2 Field">
<h3>Options for Field2</h3>
<input type = "checkbox" value="11">option11
<input type = "checkbox" value="12">option12
<input type = "checkbox" value="13">option13
<div class="Field3 Field">
<h3>Options for Field3</h3>
<input type = "checkbox" value="21">option21
<input type = "checkbox" value="22">option23
<input type = "checkbox" value="23">option23

and then make your script like so :

  var element=$(this).data("field");
  $(".Field" + element).show();

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download