CODEWITHSUNDEEP
javascriptjquery
Julio
Julio

Reputation: 6368

Getting access to various elements using jQuery

I'm currently working on something to check a box and change the text next to it to a hyperlink once ticked

<li class="myList">
<input class="myCheckBox" type="checkbox" name="frank"  value="someVal"/>
<span style="dispaly:none;">
<a class="navigation">mylink</a>
</span>
<span>myLink</span>
</li>
<li class="myList">
<input class="myCheckBox" type="checkbox" name="frank"  value="someVal"/>
<span style="dispaly:none;">
<a class="navigation">mylink</a>
</span>
<spanmyLink></span>
</li> .. and so on

Hopefully from this you can gather i have 2 items, and i want one visible as default until checkbox is ticked and the hyperlink span tag takes over from the default span tag. That changes to style="display:none" other becomes style="display:block"

Now for the jQuery

$(window).load(function(){
          $('.myCheckBox').click(function(){
           //DO DOMETHING
          });       
      });

But once I make the click event occur how to i gain access to these spans and such in order to change the styles of the various elements etc.

Thanks

Upvotes: 2

Views: 90

Answers (1)

Nick Craver
Nick Craver

Reputation: 630389

You would go from this, which is the current element then use any of the tree traversal functions to move around the DOM, for example:

$(window).load(function(){
  $('.myCheckBox').change(function() {
    $(this).next("span").toggle(this.checked);
  });       
});

In the above we're using .toggle(bool) to do the hiding/showing, this allows us to hide/show the <span> depending on whether the checkbox we care about is checked.

Upvotes: 3

Related Questions