A design question, how would you do this

[turkman]

I want to have a table or divs, each table or div has a number and a plus and minus button. The amount of rows in the table or div can change.

 

If you press a plus the number goes up and a minus makes the number go down. It seems like a waiste to make the jquery update all the divs or table rows for the sake of updating 1 number.

 

But it seems overly complex to give them all a unique div id and only have that single div updated when the plus is clicked.

 

Whats the standard way of doing this

 

example layout

 

Pace: 10    + -

Shooting: 12 + -

Control: 5 + -

 

Rather than having the whole table printed by the ajax call, is there a way to update just the number in the row of the + or - clicked

 

Hope that makes sense.

[trq]

  Quote

But it seems overly complex to give them all a unique div id and only have that single div updated when the plus is clicked.

 

What exactly is complex about it?

[turkman]

Im not sure the standard way of doing it. I mean would you create a seperate function for each of the seperate divs?

what i imagine that way to be is, Is that the stanard way of doing it?

 

<span id = 'pace_value'>10</span> <a href = 'javascript:updatePace()'> <img src = "plus.gif"></a>
<span id = 'Shooting_value'>10</span> <a href = 'javascript:updateShooting()'> <img src = "plus.gif"></a>
<span id = 'Tackling_value'>10</span> <a href = 'javascript:updateTackling()'> <img src = "plus.gif"></a>

[Vel]

If they're all doing the same thing can't you create 1 function and have the output of that function be variable, with that variable the name of the div id you need updating?

[Zane]

  Quote

I mean would you create a seperate function for each of the seperate divs?

There are no divs in your supplied code.

 

There's nothing complex about it.  You only need to use the reserved word this

 

The id route probably isn't the best idea, because you can't select all of them in one line.  It would be better to give them a class name or two... like so

Notice they all have two classes, but they all have value.  So you could easily select them all, in jQuery with

$('div.value').whatever(function() {
     /// Do some stuff.. with this element
     $(this).fadeOut().fadeIn();
});