This is a jquery function that increments num (other function decreases num by one) on click of two different button, however i want them to be incrementing and decreasing the SAME variable, as it is now, when the one button is clicked, num is incremented, however when the other button is clicked it starts from one again and goes down from one when it should use the amount from the other num if you know what i mean.
$(".eventer button[name=lol]").click(function() {
num = $(this).data('num');
if (typeof num != 'number') {
num = 1;
}
$(this).attr('disabled', true); // don't allow a second click until previous action has completed
//$.ajax('javas.php', { success: function(response) {
$(this).parent().next('.status').html(num);
$(this).data('num', ++num);
$(this).attr('disabled', false); // reset
//})
});
$(".eventer button[name=myBtn]").click(function() {
num = $(this).data('num');
if (typeof num != 'number') {
num = 1;
}
$(this).attr('disabled', true); // don't allow a second click until previous action has completed
//$.ajax('javas.php', { success: function(response) {
$(this).parent().next('.status').html(num);
$(this).data('num', --num);
$(this).attr('disabled', false); // reset
//})
});
Any help is appreciated thanks.
Why dont you use global variables by defining it outside the function.
var num = 1;
$(".eventer button[name=lol]").click(function() {
$(this).attr('disabled', true); // don't allow a second click until previous action has completed
//$.ajax('javas.php', { success: function(response) {
$(this).parent().next('.status').html(num);
num++
$(this).attr('disabled', false); // reset
//})
});
$(".eventer button[name=myBtn]").click(function() {
$(this).attr('disabled', true); // don't allow a second click until previous action has completed
//$.ajax('javas.php', { success: function(response) {
$(this).parent().next('.status').html(num);
num--;
$(this).attr('disabled', false); // reset
//})
});
You need only place num
in the global scope. (I also fixed your disabled
attributes.)
var num = 1; // global
$(".eventer button[name=lol]").click(function() {
$(this).attr('disabled', 'disabled');
num++;
$(this).parent().next('.status').html(num);
$(this).removeAttr('disabled'); // reset
});
$(".eventer button[name=myBtn]").click(function() {
$(this).attr('disabled', 'disabled');
num--;
$(this).parent().next('.status').html(num);
$(this).removeAttr('disabled'); // reset
});
Here is a jsFiddle showing it works: http://jsfiddle.net/c8EeE/2/
That's because you're storing the number as a data attribute of the button that was clicked rather than in a common place. The simplest solution is probably just to create a variable num
outside both click handlers and have them both refer to it. If your click handlers are defined with a document.ready handler then create num
as a local variable within your document.ready handler.
Something like this:
$(document).ready(function() {
// both click handlers will refer to this variable:
var num = 1;
$(".eventer button[name=lol]").click(function() {
var btn = $(this);
btn.prop('disabled', true); // don't allow a second click until previous action has completed
//$.ajax('javas.php', { success: function(response) {
$(this).parent().next('.status').html(num);
++num;
btn.prop('disabled', false); // reset
//})
});
$(".eventer button[name=myBtn]").click(function() {
var btn = $(this);
btn.prop('disabled', true); // don't allow a second click until previous action has completed
//$.ajax('javas.php', { success: function(response) {
$(this).parent().next('.status').html(num);
--num;
btn.prop('disabled', false); // reset
//})
});
});
Note all references to .data()
have been removed. Also, I'm caching $(this)
in a local variable because (a) it should be more effecient, but more importantly (b) once you uncomment your ajax success handler you'll probably find that within that handler this
isn't a reference to the clicked element. Also, I've changed your use of .attr()
to .prop()
. Also (and I haven't done this) you probably should disable/enable both buttons at the same time so the user can't click up and then down before the up result has come in.
P.S. Note that you never need to say $(this).prop('disabled', someVal)
when you can simply say this.disabled = someVal;
- within an element event handler this
is the element itself so you can access/set its properties directly rather than constructing a new jQuery object for it. I have not made this change in the code, but you probably should.
Have a look at this:
You can't declare it as 'a' global variable, because you need a counter per div. That's why the data attribute
is the best way to go.