I'm using the Ratchet framework to prototype iPhone apps.
In Ratchet, they have toggles that uses the class toggle and onclick (or tap), it uses toggle and active.
Using jQuery, how can I toggle a class to the parent parent element, so when the toggle has the class active, it adds a class (say toggle-active) to the parent parent element and when it doesn't have the class active, it removes have add that class. I've been looking at several different ways such as an if statement, onclick but I haven't found anything that works.
For example, this is what I tried:
jQuery
$(".toggle.active").click(function() {
$(this).parent().parent().toggleClass("toggle-active");
});
Markup
<div class="toggle"><div class="toggle-handle"></div></div>
Is toggleClass the problem or is it the function?
on click.. check it has class active with hasClass if yes add required class to parent.parent.. if no remove it...
try this
$(".toggle").click(function() {
if($(this).hasClass('active'){
$(this).parent().parent().addClass("toggle-active");
//or $(this).parents().eq(2).addClass("toggle-active"); //for find() or closest()
}else{
$(this).parent().parent().removeClass("toggle-active");
}
});
Related
I am trying to add a class .active if the target element does not have that class, and if another element has that class I want to remove that class so only that class I clicked on has that element. I am trying to do this with this code -
document.addEventListener('click',function(e){
document.querySelector('.active').classList.remove('.active');
if(!e.target.classList.contains('active') && e.target.classList.contains('day')){
e.target.classList.add('active');
}
});
I expect that whatever has the .active class to be removed when I click on another element, but instead when I click on another element the active class remains on the element that already had the active class and it is added onto the target that I clicked on. I have no errors in my console.
It has to be
document.querySelector('.active').classList.remove('active')
not
document.querySelector('.active').classList.remove('.active')
As you already told the browser it's about CSS classes (classList), you no longer prefix the class you specify with a ..
i want to add a class name 'disabled' under a parent div call 'anchorxx'
The disabled class div can be anywhere in the anchorXX divs
is it possible to do it with jquery ? i have no idea how i can manage to do it.
Thanks for your helps
a simple approach is
$(".anchor"+ id + " > div").addClass("disabled")
class will be added to the immediate div child element of .anchor1 div
Use jquery prefix selector and find the relevant element. Use addClass to add the required class
$('div[id^=anchor]').find('.whereYouwantToadd').addClass('someClass')
you can use jQuery's wildcard selector for this purpose.
link
you can find the anchor id and change the class of underlying div like this:
$('div[id*="anchor"]').child('div.fiche-left-disabled').addClass('disabled');
Add the 'disabled' class to its first children:
$('#anchor1').children().first().addClass('disabled')
For all anchors
$('div[id^="anchor"]').children().first().addClass('disabled')
My code
$('.viewreplycommentbutton').click(function() {
$(this).next('.reply').slideToggle(200);
});
I have three <div>s with the class .reply and when i click on a button with a link (which has the class .viewreplycommentbutton) it will show only one of those three <div>
i want to view all of these when i click on the button (which is a link with the class .viewreplycommentbutton)
but without removing $(this) from the jQuery code.
.next() returns next immediate sibling element. Use .nextAll() to get next all siblings:
$('.viewreplycommentbutton').click(function() {
$(this).nextAll('.reply').slideToggle(200);
});
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 can't seem to find exactly this issue on SE. I have a number of links in a list. When a link is clicked, the active class is added. If another link is clicked, I want that to go active and the previous active link to go inactive.
<li>
<div class="yearaction year1">
</div>
2007
</li>
<li>
<div class="yearaction year2">
</div>
2008
</li>
<li>
<div class="yearaction year3">
</div>
2009
</li>
.
.
.
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
});
This implementation doesn't affect the other links. How do I make this toggle work correctly?
You're almost there. This will toggle the classes on the link you click on. To also toggle them on the one you had previously clicked on:
$(".gotoslide").click(function(){
// previously active
$(".activeyear").toggleClass("activeyear inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});
You have to toggle it individually. A good workaround is to attach data-* to each link.
Then
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
var year = parseInt($(this).data('year')) - 1;
$('#year' + year).toggleClass("activeyear inactiveyear");
});
It depends a little on what's supposed to happen when you click the same target twice and how you have set up those classes. I think this line of thinking might help you:
$(".gotoslide").click(function () {
$(".gotoslide").removeClass("activeyear"); // removes .activeyear from all items
$(this).addClass("activeyear"); // add .activeyear to this specific item
});
It doesn't affect the other links because by using:
$(this)
you are referring only to that particular instance of .gotoslide class (the one that was clicked).
To affect all the other elements with .gotoslide class, refer to them with:
$('.gotoclass')
You can try this, just toggle one class (active) with the use of the .toggleClass() method. This way you can assume the non-active state doesn't have the class of active and use CSS to style them accordingly. This does a check for another active element, if there is one, removes the active class and makes itself active.
$(document).on('click','.gotoslide', function (e) {
if($('.gotoslide.active').length) {
$('.gotoslide.active').removeClass('active');
}
$(this).toggleClass('active');
});
You have to first clean up the other links and then set the clicked link to the correct class.
Instead of toggling classes, a safer way to go about it is set the classes explicitely to what they are supposed to be with removeClass and add Class. Initially set all all the $('.activeYear') elements (presumable only one) to inactive and then set the clicked link to 'inactiveyear'
$(".gotoslide").click(function(e){
e.preventDefault();
$(".activeyear").removeClass("activeyear").addClass("inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});
Working example here: http://jsfiddle.net/hVLML/4/