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
Related
I got the problem that I wanted to add and remove classes on clicking an element. But if I click the same element twice, the added classes will be removed. I don't really get whats the problem here.
$('#01').click( function() {
$(".d1").removeClass("show-forms");
$(".d2").removeClass("show-forms");
$(".pick-notice").toggleClass("hide-forms");
$(".d0").removeClass( "hide-forms" );
$(".d0").toggleClass("show-forms");
} );
Also is there a way to use the same function for more elements, something like this:
$('#01, #02, #03').click( function() {...
I tried this but it didnt worked
$('#01', '#02', '#03').click( function() {...
To assign the same function to multiple selectors your first code should work (see here for reference: https://api.jquery.com/multiple-selector/)
$('#01, #02, #03').click( function() {} );
It's not overly clear from your example where you are adding the classes, I think you are probably looking to use addClass (https://api.jquery.com/addClass/) as opposed to toggleClass (https://api.jquery.com/toggleClass/). addClass adds the class to the selected element. Whereas toggleClass will add the class to the selected element if it doesn't already have the class, and if it does have the class it will remove it. So that could be why the second time you click it removes the class?
Try the following:
$('#01').click( function() {
$(".d1").removeClass("show-forms");
$(".d2").removeClass("show-forms");
$(".pick-notice").addClass("hide-forms");
$(".d0").removeClass( "hide-forms" );
$(".d0").addClass("show-forms");
} );
Or if you want multiple selectors:
$('#01, #02, #03').click( function() {
$(".d1").removeClass("show-forms");
$(".d2").removeClass("show-forms");
$(".pick-notice").addClass("hide-forms");
$(".d0").removeClass( "hide-forms" );
$(".d0").addClass("show-forms");
} );
You can use this for selecting muntiple class at a time :
$("#01, #02, #03").click( function() {...});
This will work on each Id
I don't get the first part of your question but for the second part of your question:
I think it'd be a much better solution to make it a class
so 01,02,03 are all a certain class (i.e. .clickable)
with this you can just $(.clickable).click(function(){
I am trying to implement a function which changes style of element on click and remove it when unfocus. For ex: When element2 is clicked, it should remove class of other elements, and add class to the clicked element only.
<div class="dope" id="element777"></div>
<div class="dope" id="element2"></div>
<div class="dope" id="element11"></div>
<div class="dope" id="element245"></div>
<div class="dope" id="element60"></div>
.....(More are created automatically, numbers are not estimatable)
I couldnt know the element ids that are created. The only remains same is class.
I have tried this, but its an unprofessional approach.
$('#element1').click(function(){
$("#element1").addClass(dope2);
$("#element2").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
});
$("#element1").blur(function(){
$("#element1").removeClass(dope);
});
$('#element2').click(function(){
$("#element2").addClass(dope2);
$("#element1").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
});
$("#element2").blur(function(){
$("#element2").removeClass(dope);
});
What is the best approach for automating this function, instead of adding click and blur (unfocus) function to ALL of elements ?
You can listen for click events on any div with an id containing the word "element', then target its siblings elements (those that are not clicked, without referring to them by id). This might do it:
$("div[id*='element']").click(function(){
$(this).addClass('dope').siblings('.dope').removeClass('dope');
});
Your jQuery could be vastly simpler if you leverage this and siblings:
Instead of:
$("#element1").addClass(dope2);
$("#element2").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
It could be:
$('.dope').click(
function() {
$(this).addClass(dope2).siblings().removeClass(dope);
}
);
NOTE:
Do you have a variable called dope with the class name, or is dope the class name? If it's the classname, you need to put it in quotes: $(this).addClass('dope2'), etc.
If you are removing the class dope, then will want to add a class you can always use to select these elements (so that when you remove dope, it continues to work).
Button part:
$("div").click(function(){
if($(this).hasClass("dope") || $(this).hasClass("dope2")){
$(this).addClass("dope2");
$(".dope").not($(this)).removeClass("dope");
}
})
Blur part:
$("div").blur(function(){
if($(this).hasClass("dope") || $(this).hasClass("dope2")){
$(this).removeClass("dope");
}
}
I would recommend using the :focus css selector rather than using javascript to do what you are doing... Read more here. Instead of having a click listener, the focus selector will take care of that for you and automatically remove the styling when the element is out of focus.
I need help with this code:
$(document).ready(function() {
$(".fav").click(function() {
$(".fav").removeClass("fav").addClass("fav_");
});
$(".fav_").click(function() {
$(".fav_").removeClass("fav_").addClass("fav");
});
});
On click in .fav div, he transforms to .fav_ and vice-versa. Ok, but the problem is:
If you click one time to .fav class, he transform to .fav_. But if you click one time more, he don't transform again to .fav.
I tried put one var to check. ex:
if clicked one time: fav=true
if clicked two times: fav=false
but it doesn't work.
I understand jQuery, but my usual language is PHP, perhaps thence the difficulty.
You need to keep a reference to the DOM elements in a variable, and use that. This way you don't have to perform the jQuery selector again.
$(document).ready(function() {
var favs = $(".fav");
favs.click(function() {
favs.toggleClass("fav");
favs.toggleClass("fav_");
});
});
You can also use the toggleClass() method to add/remove the classes. If it tests with fav then it should toggle back and forward between fav and fav_. So there is no need for IF statements.
EDIT:
If you want to toggle the showing of the background image, then you don't have to remove the fav CSS class. Just toggle fav_ as it's background will override fav because it's lower in the CSS source.
$(document).ready(function(){
$(".fav").click(function(){
$(this).toggleClass("fav_");
});
});
http://jsfiddle.net/NzbRQ/2/
I allow the user to add multiple rows of fields, but I do not want to include a delete link on the very first row of fields, so they can't delete all the fields.
Also, how do I limit it to only 3 rows of fields?
Try this fiddle: Fiddle
For the first part of hiding the delete on the first row, I called the following on page load:
$(".removeoutcome").hide();
Then to make sure they can't add more than 3 or delete the last one, I've added length checks in your click methods, see:
$('.addoutcome').live('click', function() {
if ($(".outcomegroup").length < 3) {
$('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();
renumber();
}
});
$('.removeoutcome').live('click', function() {
if ($(".outcomegroup").length > 1) {
$(this).closest('.outcomegroup').remove();
renumber()
}
});
Also, on a side note, live is deprecated now, so if you're using jQuery 1.7, change these methods to on or if you're pre-1.7, use delegate.
You can just hide the del for first element and limit it to add only 3 more set using the following code
var count = 3;
$('.minus').first().hide();
$('.addoutcome').live('click', function() {
count--;
if(count < 0 )return;
$('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();
});
here is the working fiddle http://jsfiddle.net/joycse06/uW9NQ/
Updated: http://jsfiddle.net/NzbRQ/5/
First off, ditch .live. I added the section to give a more specific selector than body, but there's probably something better that you can use in your original DOM.
Just don't remove the last row with some simple logic. Your logic for showing the future "del" link was actually already there! You don't even really need the last-row-removal logic at all since just not displaying "del" is enough, but I was just being thorough.
I don't know why anyone haven't paid close attention to this line:
.find('.minus').show();
where he definitely was un-hiding the del element. In short, the only thing you need to do is add the proper CSS rule:
.minus { display: none; }
and that's it, the first element won't show a del link and the others will.
The limit to three elements simply.
$("[parent element]").on('click', '.addoutcome', function() {
if($('.addoutcome').length > 2) return;
...
});
A better selector [parent selector] is needed and depends totally in your layout. Basically, it is the element that wraps all these elements, the parent element of all of them.
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