jQuery: Only substract 1 after adding 1 - javascript

How can I do this in jQuery. I already have a script that can add 1 after clicking a button. But I also want something that should substract 1 if I click on the button again, and return the button to its original state.
Here's my current jquery code
$(document).ready(function() {
$("#addMe").one('click',function(){
var counter = parseInt($("#hiddenVal").val());
counter++;
$("#hiddenVal").val(counter);
$("#theCount").text(counter);
$("#addMe").toggleClass('active');
});
});
Here's my live js fiddle: http://jsfiddle.net/jehzlau/7hv2eyv0/
Right now, it adds 1 after I click it. The button should only be clickable once to add + 1. And the color of the button will change. That's the first one that I'm trying to achieve, and it's already working.
The only problem I have now is to revert the changes after clicking it again.
For example, if you click on the button, it's now blue and the heart is black, and the number is 2. What I want is if you click it again, the button will become green again by default, the heart to white, and the number 2 to 1. I just want to reverse what happened in the second click. Then if I click on it again (3rd click), it will go back to 2, then the button will be blue, and the heart will be black again. And if I click on it again (4th click), it will revert again. And so on... and so forth...
That's all I want to do, but I can't do it. I hope someone here can point me to the right direction. :(

I would do it this way. See if active class exist and then increment/decrement counter based on it:
$("#addMe").on('click',function(){
var counter = parseInt($("#hiddenVal").val());
if($(this).hasClass('active'))
counter--;
else
counter++;
$("#hiddenVal").val(counter);
$("#theCount").text(counter);
$("#addMe").toggleClass('active');
});
Working Demo

Try to use on() not one() like,
$(document).ready(function () {
$("#addMe").on('click', function () { // use on instead of one
var counter = parseInt($("#hiddenVal").val());
$(this).hasClass('active') ? 1 : 2;// toggle text 1,2
$("#hiddenVal").val(counter);
$("#theCount").text(counter);
$("#addMe").toggleClass('active');
});
});
Live Demo
If you want to add 1 and subtract 1 from any hiddenVal then, you can change it like,
$(document).ready(function () {
$("#addMe").on('click', function () { // use on instead of one
var counter = parseInt($("#hiddenVal").val());
// change the line where counter initialization takes place like
$(this).hasClass('active') ? counter-- : counter++ ;
$("#hiddenVal").val(counter);
$("#theCount").text(counter);
$("#addMe").toggleClass('active');
});
});

If you do not really want to count but just toggle, use a global variable and just toggle:
var counter = false;
$(document).ready(function() {
$("#addMe").click(function(){
counter = !counter;
$("#hiddenVal").val(counter);
$("#theCount").text(counter);
$("#addMe").toggleClass('active');
});
});
You can also drop the hidden element in your form.

Related

How to save the last hovered state on an HTML element?

I am working on a Wordpress shortcode for generating dynamically circles.
At my current version I have a problem with saving my current and my last hover state.
Here is a fiddle
I have a problem displaying the text under the circles. The text should be displayed from the last hovered circle until I hover over a new one.
Is there maybe a better solution to my problem?
I think my problem is in the hover end.
[...] ,function () {
$contentBoxPrevious = $contentBoxCurrent;
$contentBoxCurrent.removeClass('active-text');
$(this).removeClass('hover active');
}
Move this line
$contentBoxPrevious.removeClass('active-text');
from the handleOut function to the middle of handleIn function like this https://jsfiddle.net/eu0jcmh0/
What you were doing wrong was that you were removing the "active-text" class every time you moused out of the element instead of removed it when you moused on another element, hope I helped!
Your code looked way too complicated...
So I just rewrote it my way to achieve what I think you want as a result.
Here's the code:
$(document).ready(function() {
// Set all texts invisible
$(".text-content").css({
"opacity": 0
});
// Declare previous and active indexes vars
var previous_index;
var active_index;
$(".icon-circle").hover(function() {
// On mouseenter, getting this index.
active_index = $(this).data("index");
// Show associated text.
$(this).parent().find(".text-content").css({
"opacity": 1
});
// Hide previous associated text.
if (active_index != previous_index) {
$("[data-index='" + previous_index + "']").parent().find(".text-content").css({
"opacity": 0
});
}
}, function() {
// On mouseout, just keeping previous index...
previous_index = active_index;
});
});
Working Fiddle.

How to stop fast clicking animation happening jQuery

I'm working on an image slide show. There will be a set of images on the left and user can click the up or down image to see the rest of the image. I am showing only 3 Images at a time.
The way I did it is I slide up the first one, move it to the bottom. At the same time, sliding the 4th one up to show it.
Here is my jQuery code:
$("#goup").click(function(e) {
$("#imgslide > img:first")
.slideUp(500,function(e){
$(this).appendTo("#imgslide");
});
$("#imgslide > img:eq(3)").slideToggle({direction:"up"},500);
// move the paragraph with the image index sync
$("#product_description > div:first")
.appendTo("#product_description");
});
I don't have any id or class on those images ( Gonna use ajax to produce these <img> tag )
It worked when I click slowly. If I double click fast, the 3rd image is gone.
Is there any way I can stop user from fast clicking or can it wait for the last action finish to go to the next one?
$("#goup").click(function(e) {
$("#imgslide > img:first")
.slideUp(500,function(e){
$(this).appendTo("#imgslide");
});
$("#imgslide > img:eq(3)").slideToggle({direction:"up"},500);
// move the paragraph with the image index sync
$("#product_description > div:first")
.appendTo("#product_description");
return false;
});
Put a variable boolean in your click function to check whether imgslide in transition/animation mode. if clicked is true return "donothing" once slidetoggle completed set the it to false.
var clicked = false;
$("#goup").click(function(e) {
if(clicked) return;
clicked= true;
$("#imgslide > img:first")
.slideUp(500,function(e){
$(this).appendTo("#imgslide");
});
$("#imgslide > img:eq(3)").slideToggle({direction:"up",complete:function(){
clicked= false;
}},500);
// move the paragraph with the image index sync
$("#product_description > div:first")
.appendTo("#product_description");
return false;
});
OK, You can disable the double click event on the element ,So the element will not respond to the double click event.
$("#goup").dblclick(function(e) {
e.preventDefault();
}

Color picker set individual attribute in JQuery each

I have three buttons on a page I've set up as an array. I'm using $.each to iterate through them and inside that is the color picker function. I'm trying to have only the (last) clicked button change background color, but right now, if I click all 3 before using the color picker, they all change color. I need the button last clicked only to change color. JSFiddle
var test1 = $('#test1');
var test2 = $('#test2');
var test3 = $('#test3');
var elements = [test1, test2, test3]
$.each(elements, function(i) {
function handler() {
$('#color').change(function(){
$(elements[i]).unbind('click', handler);
elements[i].css('background-color', this.value);
});
}
$(elements[i]).bind('click', handler)
});
Your solution seems overly complex. A simpler solution might be this:
Add click handlers to the buttons. When a button is clicked, add an "active" class to that button and remove from others.
Bind a change handler to the color picker. When that happens, change the background color of the active button:
I'm also going to assume you can give a class of colorButton to the buttons:
$('.colorButton').click(function(e) {
e.preventDefault();
$('.colorButton').removeClass('active');
$(this).addClass('active');
})
$('#color').change(function() {
$('.colorButton.active').css('background-color', this.value);
});
Working fiddle: http://jsfiddle.net/wBsab/
Why don't you bind the click event with the color change?
$('.buttons_that_change_color_on_click').bind('click', function(){
this.style.backgroundcolor = the_value_you_want;
});

containing div does not resize correctly

On this page, 3 reviews are displayed in a Bootstrap carousel. As you paginate through the reviews, the <div> with the grey background should resize to fit the length of the review. This works reasonably well until you wrap around the end of the review list.
For example, if you use the next button to go forwards through the reviews, then when you go from the last review (#3) to to the first review, a big empty space is left under the first review. Similarly if you use the prev button to go backwards through the reviews, then when you go from the first review to the last (#3), the text of the review overflows the containing div (see screenshot below).
In summary, whenever you wrap around the list of reviews, either by using the prev button to go from #1 to #3 or the next button to go from #3 to #1) the containing div is not correctly resized.
The event handlers that are called when the user paginates through this carousel are at the bottom of the page (reproduced here for convenience):
$(document).ready(function () {
$('#reviewsCarousel').carousel({
interval:null
});
// reviewsCarousel height animation and review counter (set .reviewCount to
// the amount of .item in #reviewsCarousel, on .nextReview or .prevReview button
// clicks: set the carousel-inner class to the animate to the height of the next
// item or the first item if there is no next item, on carousel slide, set the
// reviewIndex class text to the index position of the .active .item)
$("#reviewsCarousel .reviewCount").html($('#reviewsCarousel .item').length);
$("#reviewsCarousel .btn.nextReview").click(function () {
var reviewHeight = $("#reviewsCarousel .item.active").next(".item").height();
if (reviewHeight === undefined) {
var reviewHeight = $("#reviewsCarousel .item").first(".item").height();
}
$("#reviewsCarousel .carousel-inner").animate({"height":reviewHeight + "px"}, 400);
$('#reviewsCarousel').bind('slid', function () {
$("#reviewsCarousel .reviewIndex").html($("#reviewsCarousel .active").index("#reviewsCarousel .item") + 1);
});
});
$("#reviewsCarousel .btn.prevReview").click(function () {
var reviewHeight = $("#reviewsCarousel .item.active").prev(".item").height();
if (reviewHeight === undefined) {
var reviewHeight = $("#reviewsCarousel .item").last(".item").height();
}
$("#reviewsCarousel .carousel-inner").animate({"height":reviewHeight + "px"}, 400);
$('#reviewsCarousel').bind('slid', function () {
$("#reviewsCarousel .reviewIndex").html($("#reviewsCarousel .active").index("#reviewsCarousel .item") + 1);
});
});
});
Here are a couple of screenshots showing the problem:
I tried a little something in the console:
$("#reviewsCarousel .item.active").next(".item").height();
And found out it was null.
if (reviewHeight === undefined) // It's never this.
You never get in the if. undefined !== null :-)
Just use:
if (!reviewHeight)
Any falsey value is good enough.
reviewHeight will never be undefined
USE if (!reviewHeight) insted
Maybe best not to use strict comparison for this if statement. Try instead
if (reviewHeight == undefined)
This also enters the if statement if reviewHeight === null.

Change text box quantity, change picture upon hover with jQuery/Javascript

I would like to do 2 things in jQuery or Javascript,
Change with quantity in a text box with up and down arrows. The default qty is 1, and I want to increment by 1 when a user clicks the up arrow, and vice versa.
Can I change the arrow to another picture (color) when the mouse hovers on it?
Thank you.
I would recommend using click() command for changing the value in a textbox and the hover() command for changing the arrow to another picture (color)
for example, for the incrementer
$('#myImg')
.click( function() {
var num = $('#myTextbox').text();
if (!isNaN(num))
$('#myTextbox').text(parseInt(num,10) + 1);
.hover(
function() { $(this).css('background-image','over.jpg'), //over
function() { $(this).css('background-image','out.jpg') // out
)
1.)
<script>
function increase() {
var textbox = document.getElementById('textbox');
textbox.value = parseInt(textbox.value) + 1;
}
</script>
<input id="textbox" name="textbox" type="text" value="1">
up
2.) Should be down with CSS :hover

Categories