CODEWITHSUNDEEP
javascriptjqueryhtml
Eric Whitehead
Eric Whitehead

Reputation: 130

Jquery - wrapping a bind function to THIS elements

I have multiple tables on a page (there will be over 100) and I want to use one function for all of them. When the user selects "Custom" in the drop-down menu, additional questions apply TO ALL OF THEM. How do I wrap my function in a THIS statement to have it only added to that individual table. I apologize in advance for my description of the issue. 

$(document).ready(function(){
  $('td.additional_content').css('visibility', 'hidden');
  $('#srds_mapping').bind('change', function (e) { 
        if( $('#srds_mapping').val() == 'Custom') {
            $('td.additional_content').css('visibility', 'visible');
            $('td.additional_content .custom').show();
        } else {
            $('td.additional_content').css('visibility', 'hidden');
            $('td.additional_content .custom').hide();
        }

  }).trigger('change');
});

It is better explained by looking at it

http://jsfiddle.net/2Q7J7/2/

Upvotes: 0

Views: 112

Answers (2)

khollenbeck
khollenbeck

Reputation: 16157

jQuery .each() function would be a good option:

Assuming $('#srds_mapping') is your table. Firstly, instead of id you could add a class to the tables. For example <table id="srds_mapping" class="srds_mapping"></table>. After that is in place you could do something like this.

$('.srds_mapping').each(function(){
   $(this).bind('change', function (e) {
     // other function stuff
   }).trigger('change');
});

Also, this thread may be worth a read, or something to think about.

Upvotes: 0

David Hellsing
David Hellsing

Reputation: 108510

this is the targetted element inside the event handler:

$('#srds_mapping').bind('change', function (e) {
    if( $(this).val() == 'Custom') { // traverse to find the target input element

Note that you should not use more than one ID on the page. Use classes or other selectors instead, f.ex:

$('select').bind('change', function (e) {
    if( $(this).val() == 'Custom') {

Upvotes: 1

Related Questions