Develop Reference

jQuery - addClass not adding class to html element

I try to add CSS class to <li> element, when I click on the button but addClass not working.
Here is my JS:
$('.test').click(function(event) {
var centrum1 = $('.p17');
$('section.bok-map').find( centrum1 ).addClass('active-region');
});
And this how is looking HTML code:
Where is the problem? find() returns true.
Here is demo: http://demo.vrs-factory.pl/mapDemo/

You had a couple of errors, as you were not selecting the correct element, hence the length of the selector was 0.
Firstly, the class is called pl7 not p17 and secondly, when using removeClass you don't put the . before the name of the class. As you are using removeClass it is understood that you want to target a class, hence not requiring you to specify this by adding the dot.
<script>
var centrum1 = $('.pl7');
$('.test').click(function(event) {
$('section.bok-map').find( centrum1 ).removeClass('pl7');
});
</script>
Also, it may be worth noting that since you are only referencing$(.pl7) once you do not necessarily have to assign it to a variable. You could also write it as below. It is up to you.
$('.test').click(function(event) {
$('section.bok-map').find('.pl7').removeClass('pl7');
});

Add Class to Array of ID's in Javascript

I am using .map to get an array of element IDs (this is named 'ids') that have a 'default-highlight' class. After removing that class on mouseenter, I want to return that class to those specific id's (basically, leave it how I found it).
Two things are causing me trouble right now:
When I dynamically add data-ids to the td elements and then use those data-ids to create the array of 'ids' my mouseenter stops adding the 'HIGHLIGHT' class (NO idea why this is happening)
On mouseleave I can't loop through the 'ids' and return the 'default-highlight' class to the elements they originally were on
I figure I should be using something like this, but it obviously isn't working:
$.each(ids, function() {
$(this).addClass('default-highlight');
});
I have tried a number of things, but keep coming up short. I am attaching a link to a codepen.io where I use data-ids that are being dynamically added to the table (this one the mouseenter doesn't work) and a codepen one where I am using regular IDs for the default highlight and everything appears to work like it is supposed to be (It isn't, since I want to be using the dynamically generated data-ids and then the subsequently produced array to reapply those classes).
Both of these codepens have a gif at top showing how the interaction should work.
If anything is unclear, please let me know. Thanks for reading!

You need to add # before id selector
$.each(ids, function() {
$('#'+this).addClass('default-highlight');
});
or you can use common selector by the help of map() and join()
$(ids.map(function(i, v) {
return '#' + v;
}).join()).addClass('default-highlight');
or you can add # when getting the id's and then you just need to join them
var ids = $('.default-highlight').map(function(i) {
return '#'+$(this).data('id');
}).get();
...
...
...
$(ids.join()).addClass('default-highlight');

It seems like storing the IDs and using those is overkill when you can store a reference to the jQuery element directly:
$highlightCells = $('.default-highlight').removeClass('default-highlight')
And later give the class back:
$highlightCells.addClass('default-highlight')
Here's a codepen fork: http://codepen.io/anon/pen/ZbOvZR?editors=101

Use this way:
$.each(ids, function() {
$("#" + this).addClass('default-highlight');
});

find siblings and addclass using javascript only

I want to add class on siblings of target Element in javascript. I have done this before using jquery which is pretty easy. But In my current organization they do not use jquery and I need to done with javascript and that is very difficult for me.
I have write some code that will attached a click function to an matched element but afterward I am not getting any login to how to make it happend. fiddle
var elements= document.getElementsByTagName('*'),i;
i=0;
while(elements[i]){
if(elements[i].className=='c'){
elements[i].addEventListener('click',function(){
this.jsSiblings().jsAddClass('newClass')
})
}
i++
}
Array.prototype.jsSiblings= function(){
//code
}
Array.prototype.jsAddClass=function(){
//code
}

You can use the base function in JS to add a class, element.classList.add("anotherclass"); (from MDN) and here you will find out about siblings without jQuery : How to find all Siblings of currently selected object

jquery toggle id's instead of classes?

is there a way to make a toggle function that first of all toggles only one css style element, such as background-color or something like that. and that selects an id instead of a class, for i know of the toggleClass, but im just wondering if it's possible with ids instead?
$("#gallery").load('http://localhost/index.php/site/gallerys_avalible/ #gallerys_avalible');
$('li').live('click', function(e) {
e.preventDefault();
if(!clickCount >=1) {
$(this).css("background-color","#CC0000");
clickCount++;
}
console.log("I have been clicked!");
return false;
});

You really should use classes for that. IDs are unique within a page and should be used as points where you catch events ( via $.live() or some other method which uses event delegation ). Besides , if you think of using IDs because they have higher specificity in CSS rules , then you are going the wrong way.
In short: bad idea, stick to toggling classes.

EDIT:
After reading OP's comment - I believe this is what he is looking for a way to highlight an "active" link on click. And Yes, teresko is definitely right that you should be toggling the classes, not the ID's.
This is the essence of a jQuery snippet that you may be looking for:
$("li").bind('click', function(){
// remove the active class if it's there
if($("li.active").length) $("li.active").removeClass('active');
// add teh active class to the clicked element
$(this).addClass('active');
});
Demo
Check out the jQuery toggle api.
It's a little confusing because a simple google search on jQuery toggle brings you to the show/hide toggle documentation. But, .toggle() can be used to alternate functions - you can even add more than two.
like so...
$("el").toggle(
function(){
$(this).css('background-color', 'red');
},
function(){
$(this).css('background-color, ''); // sets the bg-color to nothing
});

jQuery doesnt has toggleId() function . But you can create your own id toggle function .
function toggleId(className,id)
{
var tag = document.querySelector('.'+className);
tag.id = tag.getAttribute("id") ? '' : id;
}
toggleId("myClass","id");
this will toggle id ( id and NULL ) of myClass element .
another example for toggling between two id
suppose you want to toggle between two id ( id1 and id2 ) of an element then
function toggleId(className,id1,id2)
{
var tag = document.querySelector('.'+className);
tag.id = tag.getAttribute("id") ? id2 : id1;
}
toggleId("myClass","id1","id2");

$("click-element").bind('click', function(){
if($("your-element").is('#yourIdValue')){
$('your-element').removeAttr('id');
}else{
$('your-element').attr('id', 'yourIdValue');
}
});
});

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