Repeating functions

Question

i seem to repeat alot of functions when coding something simple, is there a better way of doing this?

  $('#bt1').click(function() {
      $('#txt1').show();
      $(this).css("background-image", "url(site_images/08/btn_over.png)");  
}); 

  $('#bt2').click(function() {
      $('#txt2').show();
      $(this).css("background-image", "url(site_images/08/btn_over.png)");  
}); 

  $('#bt3').click(function() {
      $('#txt3').show();
      $(this).css("background-image", "url(site_images/08/btn_over.png)");  
}); 

  $('#bt4').click(function() {
      $('#txt4').show();
      $(this).css("background-image", "url(site_images/08/btn_over.png)");  
});

so that i'm not repeating code?

score 6 · Accepted Answer · answered May 13 '13 at 09:28

6

Give your buttons a class, such as btn, and then you can do something like:-

$('.btn').click(function() {
  $('#' + this.id.replace('bt', 'txt')).show();
  $(this).css("background-image", "url(site_images/08/btn_over.png)"); 
});

answered May 13 '13 at 09:28

billyonecan

20,090
8
42
64

if I cought it right, this doesn't cover different texts which user want to display ... #txt1 .. #txt[n] – Lukas Greso May 13 '13 at 09:34
1

@LukasGreso It does. It takes the ID of the button that was clicked on (e.g. `bt1`) then replaces the `bt` part with `txt` to get the ID of the associated text to show; it's the first line of the event handler function. – Anthony Grist May 13 '13 at 09:36
YES YES, I see ... sorry :) – Lukas Greso May 13 '13 at 09:36

score 3 · Answer 2 · answered May 13 '13 at 09:28

3

You can try to use attribute Starts With Selector:

$("[id^='bt']").click(function() {
      var number = $(this).prop('id').slice(-1);
      $('#txt' + number).show();
      $(this).css("background-image", "url(site_images/08/btn_over.png)");  
});

answered May 13 '13 at 09:28

Eli

14,779
5
59
77

Thanks! Good to see a few different methods – Ma9ic May 13 '13 at 09:33
@pouki06 You can easily use a regex to get the last number :) – Eli May 13 '13 at 09:44

score 1 · Answer 3 · answered May 13 '13 at 09:33

1

How about this,

$('#bt1,#bt2,#bt3,#bt4').click(function () {
    var number = this.id.replace( /^\D+/g, '');
    $('#txt'+number).show();
    $(this).css("background-image", "url(site_images/08/btn_over.png)");
});

note: better if you can add a class for all the items need to click. and then selecter will be changed to class name. rest of the code is same

answered May 13 '13 at 09:33

Chamika Sandamal

23,565
5
63
86

That doesn't extend nicely if they add new elements, and would still require them to list them all out individually. – Anthony Grist May 13 '13 at 09:36
@AnthonyGrist, Hope you can see the note as well – Chamika Sandamal May 13 '13 at 09:37
I can, but it wasn't there when I wrote my comment. If you're aware that's the better solution why exactly would you suggest a different one? – Anthony Grist May 13 '13 at 09:39
Code sample is working without any changes to dom. but if he can change the dom he can go for the second option. – Chamika Sandamal May 13 '13 at 09:42

score 0 · Answer 4 · edited May 23 '17 at 11:49

0

Use Multiple Selector

$('#bt1, #bt2, #bt3, #bt4').click(function () {
    var number = this.id.replace( /^\D+/g, '');
    $('#txt'+number).show();
    $(this).css("background-image", "url(site_images/08/btn_over.png)");
});

You can also .add() selectors: How to combine two jQuery results

edited May 23 '17 at 11:49

Community

1
1

answered May 13 '13 at 09:31

Danubian Sailor

1
38
145
223

Repeating functions

4 Answers4