Change status on click jquery - javascript

Trying to change the status of font-awesome when checkbox is checked heart should change to red. Can't find the right thing to make it work.
can I click the heart and hide the checkbox? I know its something :before in the css but not entirely sure.
http://jsfiddle.net/xd8LbtLz/
$('.addToFav').click(function(){
if($(this).prop('checked')){
console.log('change heart to red');
} else {
console.log('do nothing atm');
}
})

Firstly, your fiddle did not include jQuery. Secondly, there's no point using prop to access a property of an element in a jQuery object when you can directly access the element itself. Lastly, you can use toggleClass() to add or remove a CSS class to change the colour of the hearts. Try this:
$('.addToFav').click(function () {
$('.fa-heart').toggleClass('red', this.checked);
})
Example fiddle

You can use,
$('.addToFav').click(function() {
if ($(this).prop('checked')) {
$(this).prev().find("i").css("color", "red");
} else {
$(this).prev().find("i").css("color", "black");
}
})
Fiddle

Few points
1) Your fiddle did not had jquery library included. which you need to include for using jq syntax.
2) Using change event is more appropriate in case of checkbox than click event.
3) use current checked property to set color to icon .fa-heart
$('.addToFav').change(function(){
$(this).prev().css('color',this.checked ? "red":"black");
});
Working Demo

Related

click then unclick jquery button not working

I'm trying to make a button which on one click it changes it's color, and on another click it returns to it's original form.
something like clicked and unclicked.
I added a JSfiddle for you to look at it.
https://jsfiddle.net/dw5y5xLx/3/
$('.genM').click(function() {
$('.genM').removeClass('selected');
$(this).addClass('selected');
});
thanks!
also, is there a way doing that by only using CSS HTML?
Thanks.
$('.genM').click(function() {
$(this).toggleClass('selected');
});
I have updated the js fiddle for you, please check (https://jsfiddle.net/dw5y5xLx/15/)!
jQuery hasClass function can be helpful
$('.genM').click(function() {
if($(this).hasClass('selected')){
$(this).removeClass('selected');
}else{
$(this).addClass('selected');
}
});
IDEA:
Is there a way doing that by only using CSS HTML?
Yes, there is a way how u could achieve that just by pure CSS and HTML. But, if you dont want to use js, you must have an HTML element that is able to keep the "pressed" or "unpressed" state all by itself, without js.
However, there is no such an HTML element, so you have to use something simmilar: Checkbox
<input type="checkbox"> have "checked" and "unchecked" state and it is practicaly the same as "pressed" or "unpressed".
SOLUTION:
The trick is to stylize the ckeckbox with CSS so it visually appears as a pressed or unpressed button. Here is an example how checkbox can be stylised - you need to modify the CSS in order to appear it like a button, not a toggle switch!
You will want to use CSS selectors like this (as shown in example):
input[type="checkbox"]:checked { ... },
input[type="checkbox"]:checked + .slider { ... },

How to hide elements when another element is clicked

Having a bit of difficulty getting this jquery to work. I have a form where all fields are nested in a div.form-group. The subscribe button has an id of subscribe.
I want the form fields to disappear on click... but my js is not working out. Here's what I've tried, to no avail:
(function($) {
window.onload = function () {
$("#subscribe").click(function() {
$(".form-group").css("display: none");
});
}
})(jQuery);
The form-group class is set to display: block in the CSS.
Is there something obvious I'm missing here? Any help is greatly appreciated.
cheers,
jQuery provides a .hide() method as a shortcut to setting the various CSS directives that hide an element (display: none and visibility: hidden, for example).
$(".form-group").hide();
If you prefer to set the CSS directly, place quotes around both elements of the statement:
$(".form-group").css("display", "none");
$(".form-group").css("display: none");
supposed to be
$(".form-group").css("display", "none");
**OR**
$(".form-group").css({ "display" : "none"});
you have been trying to set the attribute as a single string.
It is supposed to be comma separated if it's only a single attribute that you want to change.
Or an object if you want to target multiple css properties at the same time.
$("#subscribe").click(function() {
$(".form-group").hide()
});
}
$( "#anotherid" ).on('click', function() {
$( "#idhere" ).hide('slow');
});
Try this

jQuery custom menu - adding and removing classes onClick

If someone can think of a better title for this question, please feel free to alter it. This is the issue: in a navigation menu, clicking an item should mark it red (default is orange). Both orange and red styles (class names bmark and bmark_active respectively) were generated using the CSS Button Generator application. This is the jQuery code which should do the job:
$(function () {
$('.bmark').click(function(){
$('.bmark_active').addClass('bmark');
$('.bmark_active').removeClass('bmark_active');
$(this).addClass('bmark_active');
$(this).removeClass('bmark');
});
})
It works fine for all buttons, except the default one ('All' in the fiddle example). So if you click 'Russia', for example, the red focus will move onto that button (by removing orange class and adding red class), but then when you click 'All' again, it doesn't switch to red. Why is that and how do I fix it?
JS Fiddle
You're not applying the click() event to the parent element, only applying it to the child elements:
$(function () {
$('.bmark, .bmark_active').click(function(){
$('.bmark_active').toggleClass('bmark').removeClass('bmark_active');
$(this).addClass('bmark_active').removeClass('bmark');
});
})
jsFiddle here.
Updated your fiddle do it that way. More simplified. The other answers here work fine but this is the least verbose way of handling it.
$(function () {
$('.bmark').click(function(){
$('.bmark').removeClass('active');
$(this).addClass('active');
});
})
http://jsfiddle.net/chazelton/52esG/2/
You're not binding on the '.bmark_active' element.
You can do this :
$(function () {
$(document).on('click', '.bmark_active,.bmark', function() {
$('.bmark_active').addClass('bmark').removeClass('bmark_active');
$(this).removeClass('bmark').addClass('bmark_active');
});
})
Demonstration
But most often I'd prefer to give the same class to all elements, and to only add or remove a class on the active elements, so that the event handling code would be
$('.bmark').removeClass('active');
$(this).addClass('active');
It also lets the CSS be cleaner as your two classes are, for now, mostly identical and it's better to have just the few changes between the two modes isolated in the 'active' class.

Jquery Focusing on div to apply CSS style

I have various styles, such as:
.line{}
And:
.line:focus{}
Each have their own unique look.
What I want to do is have jquery focus on a div with the .line class and thus change it's style to line:focus. However, when using $('.line').focus();, the style does not change, and I'm reasonably sure the div with .line class is not focused on.
Any ideas/suggestions? Thanks in advance :).
jQuery's focus would work, demo
Edit:
Without a focus-able element, I would use toggleClass demo2
$(".").focus() only works on certain elements.
DIV isn't a supported element to be focused.
You can try to recreate focus using .click
$("div").click(function(){
$(this).toggleClass('focused');
if ($(this).hasClass('focused')){
// do something
}else{
// do something else
}
});
div elements don't support a focus state that I'm aware of, so you'll have to manually change the divs style anytime one of its inputs is focused (and of course change it back when the input is blurred).
$("div.line input").focus(function() {
$(this).closest(".line").addClass("line-focus");
}).blur(function() {
$(this).closest(".line").removeClass("line-focus");
});
And of course change
.line:focus { }
to
.line-focus { }
$('input').focus(function() {
$(this).css('background','green');
});
See example

Jquery problem onclick add class and remove class

first time posting here. I'm a beginner in jquery and i ran into some grey area. Hopefully i can find my answer here and learn from it also :)
So i have a let's say 10 different div. All has the same class. And everytime I click on the div it has to add another class (in this case background-color in css). For that I have this:
$(document).ready(function() {
$(".menucardmenu").click(function(){
if($(this).hasClass("menucardmenu")) {
$(this).addClass("backgroundmenucard");
}
else {
alert ("condition false");
}
});
});
But the question now is, how can i make that only one div can have that background-color (in my case backgroundmenucard). Depending one which div the user click, that div will have the background-color, and the previous div (that was clicked) should reset it back to normal. I can do it with this right?:
$(this).removeClass("backgroundmenucard");
does anyone know the answer to this???
Regards,
Andrew
try the following:
$(".menucardmenu").click(function(){
$(".backgroundmenucard").removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
});
Demo: http://jsfiddle.net/r2Sua/
(I remove the if because it's useless in this case)
Remove from all...
$(".menucardmenu").removeClass("backgroundmenucard");
Then add to this
$(function() // shorthand for document ready
{
var $divs = $('div.menucardmenu'), // standard jQuery "cache" idiom
BG_CLASS = 'backgroundmenucard'; // stay DRY, less prone to typos
$divs.live('click', function() // use .live to bind only 1 event listener
{
// remove the class from all divs
$divs.removeClass(BG_CLASS);
// add the class to this div
$(this).addClass(BG_CLASS);
}
});
});
The if($(this).hasClass("menucardmenu")) check is completely unnecessary since you're already selecting elements which have that class. It will always evaluate to true.
$('.menucardmenu').click(function(){
$('.menucardmenu').removeClass('backgroundmenucard');
$(this).addClass('backgroundmenucard');
});
Another option would be:
$(".menucardmenu").not(this).removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
This way you don't remove and add the class to the specific (this) element

Categories

Resources