javascript - Group JS events - Stack Overflow

admin管理员组

文章数量:1400117

I currently have four change() events that fire exactly the same code (see below), so I'm wondering if there is a way of grouping these events in one line to save reapeating code four times?

Thanks.

/** Check for a change to any of the search dropdowns */
$('#job-roles').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});
$('#ind-services').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});
$('#bus-services').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});
$('#indi-services').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});

I currently have four change() events that fire exactly the same code (see below), so I'm wondering if there is a way of grouping these events in one line to save reapeating code four times?

Thanks.

/** Check for a change to any of the search dropdowns */
$('#job-roles').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});
$('#ind-services').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});
$('#bus-services').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});
$('#indi-services').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});

• javascript
• jquery
• onchange

Share Improve this question Follow edited Jan 28, 2012 at 16:43 PeeHaa 72.8k6060 gold badges194194 silver badges264264 bronze badges asked Nov 4, 2011 at 16:12 David GardDavid Gard 12.1k4242 gold badges128128 silver badges263263 bronze badges 7

• 3 letter = $_GET('staff_search');??? – Matt Commented Nov 4, 2011 at 16:16
• +1 @Matt hahaha I didn't spot that !!!! – Manse Commented Nov 4, 2011 at 16:22
• @Matt - What's the problem with that code? – David Gard Commented Nov 4, 2011 at 16:35
• @DavidGard: If thats supposed to be a variable, you should prefix the statement with var. What is $_GET['staff_search']? You mean "<?php echo addcslashes($_GET['staff_search'], '"'); ?>" (PHP is rusty.. but hope you get the gist). – Matt Commented Nov 4, 2011 at 16:43
• @Matt - Yes, I should have var before the statement. $_GET is a function. I add the letter that is being searched for to the end of the url (i.e. #?staff_search=m) and then use this to get the letter. I need to have the letter in the URI as each time a user changes a search criteria the search is automatically run. This is the best way I could think to do it, and $_GET() is just fortable because I use PHP. – David Gard Commented Nov 4, 2011 at 16:47

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 5

$('#job-roles, #indi-services, #ind-services, #bus-services').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});

Option 1: give them all the same class and attach the event to all of them $('.someClass').change(...)

Option 2: Group the event: $('#job-roles, #ind-services, ... ').change(...)

Use a class ?

Give all the elements a class of say doSomething then use the following code to implement the listener:

$('.doSomething').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});

Another option, in addition to the excellent ones already described, is simply:

(function(){
  function doCoolStuff(){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
  }

  $('#job-roles').change(function(e){
    doCoolStuff();
  });
  $('#ind-services').change(function(e){
    doCoolStuff();
  });
  $('#bus-services').change(function(e){
    doCoolStuff();
  });
  $('#indi-services').change(function(e){
    doCoolStuff();
  });
}());

本文标签： javascriptGroup JS eventsStack Overflow