Change background color elements in the array - javascript

Pagination functionality: I want to change background color if a user clicks any element in the array. I am able to achieve this with code below but when I click other elements in this array I want the element that was previously clicked and the remaining elements to use original pagins class. Can someone point me in the direction?
.pagins a {
color: #fff;
background-color:#009de0;
}
.testClass {
background-color:#fff !important;
color:#009de0 !important;
}
var elements = document.getElementsByClassName('pagins');
$.each(elements, function(){
$(elements).click(function(){
$(this).addClass('testClass');
});
})

Do not use $.each(), which is a way of looping in jQuery. You will end up calling the click handler multiple times per click.
You are using jQuery, so don't use document.getElementsByClassName('pagins'). Just use $('.pagins').
Sounds like you only want the most recently clicked .pagins element to have the testClass class. So, remove the class from all .pagins.testClass elements before adding the class to the clicked element.
$('.pagins').click(function(){
$('.pagins.testClass').removeClass('testClass');
$(this).addClass('testClass');
});

Remove the testClass from all elements before adding it to the selected element.
$.each(elements, function(){
$(elements).click(function() {
$(elements).removeClass('testClass');
$(this).addClass('testClass');
});
});

var elements = document.getElementsByClassName('pagins');
$.each(elements, function(){
$(elements).click(function(){
$.each(elements, function() {$(this).removeClass('testClass')});
$(this).addClass('testClass');
});
})

Simplifying your code a bit you could do this -
$(".testClass").removeClass("testClass");
$(".pagins").click(function() {
$(this).addClass('testClass');
});
As supplying a class selector will apply the click function to all elements with that class.

Related

if any div has Class through alert

So i have this jQuery function that checks if a particular div has the "red" class attached to it. However i want to know how i can make it so that it checks mutliple Divs not just the "#Drop1" div.
I have 4 Divs in total from #Drop1 all the way to #Drop4.
I want to get it working so that it checks all 4 Divs for the class "red" and if any div has this class show the alert message.
I've looked around and can't seem to find a concrete answer.
$("Button").click(function(){
if ( $("#Drop1").hasClass("red") ) {
alert("one of your Divs has the class red");
}
});
Since each of the element's id attributes start with 'Drop', you could use the attribute selector [id^='Drop']:
$("button").click(function(){
if ($("[id^='Drop']").hasClass("red")) {
// ...
}
});
Or you could just combine the attribtue selector with a class selector and check the .length property:
$("button").click(function(){
if ($("[id^='Drop'].red").length) {
// ...
}
});
Is there some reason why directly selecting on the class: $( "div.red" ).each(...) isn't going to work?

How to change button class in a div while just the last one can keep the change?

I'm using this code to change my buttons's class:
$('button').on('click', function(){
var btn=$(this);
if(btn.attr('class')=='tct-button'){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
The problem is that I have multiple div's with multiple buttons in each. I need to change this so that every time I click on a button in a div the others which were changed by a previous click (in that same div) change back to the default class which is 'tct-button', and just the last clicked button turns to 'tct-button2'. Would you please help me.
use toggleClass in jquery ,there is no need to check hasClass()
$(this).toggleClass("tct-button2 tct-button");
DEMO
Use hasClass()
Determine whether any of the matched elements are assigned the given class.
Code
$('button').on('click', function(){
var btn=$(this);
if(btn.hasClass('tct-button')){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
However I think you need
$('button').on('click', function(){
$('.tct-button2').removeClass('tct-button2'); //Remove all class
$(this).addClass('tct-button2'); //Add the class to current element
});
If you want to add an additional class to your buttons (tct-button2) whilst keeping tct-button on every button you could do what Satpal suggested.
However, from the sounds of it and I may be wrong, if you want to change the classes so that each button only has one class at a time on it (either tct-button or tct-button2) you can do similar to what Satpal suggested and use:
$('button').on('click', function(){
$('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Add original class and Remove tct-button2 class
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
Here is the example http://jsfiddle.net/lee_gladding/xao46uzs/
to only affect buttons in the div the clicked one belongs to, use a similar method to:
$('button').on('click', function(){
$(this).parent('div').find('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Remove all class in that div
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
(You might want to use a better selector for the parent, possibly a class or what ever your actual html uses)
Example:
http://jsfiddle.net/lee_gladding/xao46uzs/3/

How to only select one multiple class with jQuery

I have a form that has checkmarks behind them. They all are tied to labels and have all the some class names. I could just make new classes or ID's for each one but figured their was an easier way to only select the checkmark that is inside that particular class?
http://jsfiddle.net/70fbLooL/
<script>
$(document).ready(function(){
$(".companyLabel").click(function(){
$(".fa-check").toggle();
$(this).toggleClass("companyLabelBackground");
});
});
</script>
$(".fa-check").toggle(); will toggle all elements with class .fa-check.
Instead, use find() to get the closest element in relation to this.
Try this:
$(document).ready(function () {
$(".companyLabel").click(function () {
$(this).find(".fa-check").toggle();
$(this).toggleClass("companyLabelBackground");
});
});
JSFiddle Demo
you can use .closest() and .find() to dynamically detect closest div or element. for example
$(this).closest('.companyLabel').find('.fa-check').toggle();
code :
$(document).ready(function(){
$(".companyLabel").click(function(){
$(this).closest('.companyLabel').find('.fa-check').toggle();
});
});
JSFIDDLE DEMO

adding and removing the selected class to a parent div

OK so now I have my sliding open ul revealing all the list elements, and now I want the title bar that is clicked on to have a state of selected added to it, and then remove that state when it's closed...
the div above the UL has a class of .regionHeader
here's an example of the mark up
<div class="regionHeader">title of the region</div>
<ul class="region"><li>the region i'm hiding/showing</li></ul>
here's the javascript
var stockists = {
start: function() {
$('.region').hide();
$('.regionTitle').each(function(){
$(this).click(function(e){
e.preventDefault();
$(this).parent().next('.region').slideToggle(300);
});
});
}
};
$(stockists.start);
I've been trying addClass but it seems to just add the class and not remove it?
Can you not use toggleClass()
This way the class will be added/removed when you need it to be.
$(this).parent().toggleClass("className");
$(this).parent().next('.region').slideToggle(300);
$(this).parent().toggleClass('activeTitle'); // toggling the class on the parent
$(this).parent().next('.region').slideToggle(300);
to remove a class from an element you have to use removeClass
$(element).removeClass("classname");

using $(this) jquery to change another element

So, I know how to change an attribute for the same element you hover over...
$(".click2play").mouseover(function()
{
$(this).css({'visibility' : 'hidden'});
});
question Can I do the same thing but to affect another element only within the same 'click2play' div that was hovered?
maybe like?
$(".click2play").mouseover(function()
{
$(this).(#someotherdiv).css({'visibility' : 'hidden'});
});
Thanks everyone!
This code targets a div, within the current .click2play element. I believe that's what you were asking for :)
$(".click2play").mouseover(function() {
$('div.class_name', this).css({'visibility' : 'hidden'});
});
not very clear from the ques what you wanna do so ill ans for all the options i can guess of
1.if you wanna hide all the elements of class .click2Play then use
$('.click2Play').hover(function(){$('.click2play').hide()});
2.if you want to just hide the current element of all the elements having this class use
$('.click2Play').hover(function(){$(this).hide()});
3.if you wanna generalize it then you can use.selector property of the jquery object so that you would be able to use it like
$('.click2Play').hover(function(){$($(this).selector).hide()});
so now if you will change the class name from .click2Play to some other class it will work nicely and will hide all the elements of that class.
4. if you want to hide some element inside that of current element then
$('.click2Play').hover(function(){$(this).children('selector_of_child').hide()});
5.if all the elements of this class have an element inside them having some other class and you wanna hide them all then simple use each like this
$('.click2Play').hover(function(){$('.click2play').each(function(){$(this).children("selector_Of_Child").hide()})});
I would do like this:
$(".click2play").mouseover(function(){
$(this).hide();
});
But maybe it isn't what you want to do?
I suppose this :):
$(".click2play").mouseover(function(){
$(this).css({'visibility' : 'hidden'});
});
or better
$(".click2play").mouseover(function(){
$(this).hide();
});
You want to change some other div? Why would you need $(this)?
$(".click2play").mouseover(function(){
$("#someotherdiv").hide();
});
To change a single css attribute you can do:
$(".click2play").mouseover(function(){
$(this).css('visibility', 'hidden');
});
I hope it helps
(consider to see this link: http://marakana.com/bookshelf/jquery_tutorial/css_styling.html )
I believe most of the answers didn't payed attention to the question, which asks about removing a class. Here is the answer to both questions:
$('.click2play').bind('mouseenter mouseleave', function () {
$(this).removeClass('click2play'); // This line removes the current object's class click2play
$('jQUerySelector').removeClass('click2play'); // This will remove another element's class click2play
});

Categories