Jquery generalise .click

I am currently using jquery function(below) to display a block on click of a text. can't i generalize it $('#totalcomments'+id).click or something , In below code no is a integer. basically i have a set of repeating div's whose format is hiddencomments1, hiddencomments2 ......... So on click on a text whose id=totalcomments1 i want to display the div whose id=hiddencomments1

function开发者_StackOverflow中文版 showcomments(no)
{
 $('#totalcomments'+no).hide();
 $('#hiddencomments'+no).show();
}

Looks like I've joined the show a little late, but you should really, really, really consider using delegate or liveto bind your events instead of click.

If, as you said in a comment, you could have up to 9,999 elements to bind this event for, with click you're getting each one and binding the same event to each of them; not good. With live or delegate however, you bind the event once to an shared-ancestor of the elements (document in the case of live), and take advantage of JavaScript's event bubbling mechanism. This is infinitely more efficient.

As mentioned by @lonesomeday in the comments, the difference between live and delegate is the syntax you use to first bind the event; live selects the elements to begin with, where-as delegate doesn't.

(delegate > live > click)

Whether it's a id-starts-with or class approach you choose, the notion is still the same:

$(document).delegate('[id^=totalcomments]', 'click', function() {
    $(this).hide();
    $('#hiddencomments'+this.id.replace('total','hidden')).show();
});

or

$('.yourSharedClass').live('click', function() {
    $(this).hide();
    $('#hiddencomments'+ this.id.replace('total','hidden')).show();
});

Again, looking at this from a performance point of view, using a class based system would be quicker.

I've done one example using live and another with delegate, to provide an example of using both.

Something like this:

$('[id^=totalcomments]').click(function() {
    $(this).hide();
    $('#hiddencomments'+this.id.match(/\d+$/)[0]).show();
});

Note that you should be using classes instead, would make your life a bit easier. :)

Something like this?

$('[id^=totalcomments]').click(function () {
    $(this).hide();
    $('#' + this.id.replace('total','hidden')).show();
});

Why not use classes to select them rather than ids?

There are nice ways to do this using the index, depending on your markup. A more hacky way to to it would be to use the substr function on the id:

$('.totalcomments').click(function(){
    $(this).hide();
    $('#hiddencomments' + this.id.substr(-1)).show();
});

NB that this supposes (a) that all your totalcomments# elements have a class totalcomments and that there are no more than 10 (indexes 0-9).

try something like this.... first hide all comments

 $('#hiddencomments'+no).hide();

then show those comment which is being clicked

$('#totalcomments'+no).click(function(){
  $('#hiddencomments'+no).show();});

You should have a class, say "visible" on your divs....

$('div.visible').bind('click',function(){
  $(this).hide().addClass('hidden');
});

$('div.hidden').bind('click',function(){
  $(this).show().addClass('visible');
});

and then you can do styling as well two these two classes.