Using $(this) with jQuery not always working - javascript

On line 6 below, I have $("ul.tabrow li").removeClass("active"); //Remove any "active" class If I change it to use $(this).removeClass("active") instead then it does not work as I thought it was.
The code works how I want it to right now, I am just wanting to know why what I mentioned above does not work, on line 7 below I use $(this) on what appears to be the same selector and that works on line 7's code but differently on line 6.
Can anyone explain this?
$("ul.tabrow li").bind({
click: function() {
return false;
},
mouseenter: function() {
$("ul.tabrow li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab-box").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
//$(activeTab).fadeIn(); //Fade in the active content
$(activeTab).show(); //Fade in the active content
return false;
}
});

You actually want to use $("ul.tabrow li") on line 6. This is because $(this) only refers to the current list item, not all of them.
$(this) is not a replacement for the selector, it refers to the current active element (the one you are mousing over). So using this on line six removes the active class from the current element and then immediately adds it back. The result is essentially nothing happening.
If you don't want to repeat the selector then you may want to use something more generic like
$(this).siblings().removeClass('active');

Related

Jquery function add/remove class from div on button hover

I have this jquery script that I got some help with in creating in order to add/remove an "active" class to a div when hovering over a button.
Below a CodePen of what I have put together:
CodePen Link: https://codepen.io/dustin-keeslar/pen/dapLWM
It works well, however what I'm trying to change is to have whatever button was last hovered on, to keep the "active" class on the content. So that the content only changes when a different button is hovered over.
jQuery(document).ready(function() {
jQuery(".toggle-button").hover(function() {
var target = jQuery(this).data("target");
if (jQuery(this).hasClass("expand")) {
jQuery(this).toggleClass("expand");
jQuery("#" + target).removeClass("active");
} else {
jQuery(".toggle-button").removeClass("expand");
jQuery(".hidden-content").removeClass("active");
jQuery(this).toggleClass('expand');
jQuery("#" + target).toggleClass("active");
}
});
});
This will find a button that has data-target=content1" for example, and when it is hovered over it will toggle an "active" class to a div with the ID "content1". The problem is that when you are no longer hovering, everything disappears. I need the most recent hovered button to keep the "active" class on the content. But I also need the content to change dynamically when the next button is hovered over.
Then fix it to use mouseenter, and move your remove code to the top to remove your classes before adding them back to the element that's been entered. I don't understand exactly what you're trying to do here, but using mouseenter it should be something like:
jQuery(document).ready(function() {
jQuery(".toggle-button").mouseenter(function() {
jQuery(".toggle-button").removeClass("expand");
// jQuery(".hidden-content").removeClass("active");
$(".active").removeClass("active");
var target = jQuery(this).data("target");
jQuery("#" + target).addClass("active");
if (jQuery(this).hasClass("expand")) {
jQuery(this).removeClass("expand");
jQuery("#" + target).removeClass("active");
}
});
});
All you are missing is a check, to ensure the current item matches the target:
jQuery(this).attr('id') == target
Codepen here: https://codepen.io/anon/pen/VgKOPy

jQuery program not working

I am having a problem using jQuery, merely due to inexperience using it. My program is meant to give the CSS class current to the links in my navbar if they are clicked, and remove the class from the previous owner of it.
Keep in mind I am very inexperienced in javascript, only picking it up in a few minutes for the sake of a school assignment.The script is simply not doing anything.
My Code:
$(document).ready(function() {
$('a').click( function(i){
var $current = $('a.current');
$(this).addClass('current');
$current.removeClass('current');
});
});
Edit 1: Strange bug, current class is applied to the whole document if I do not click a link, but instead click the document.
You should first remove the class, and then add it. Otherwise you will not have a class added if you click an anchor twice.
$(function() {
$('a').click(function() {
$('a.current').removeClass('current');
$(this).addClass('current');
});
});
Try this:
$current.removeClass('current');
$(this).addClass('current');
You need to first remove the active class, then add the current class for the current element.
You need to narrow down your code to only affect the links in the nav bar, as currently, you are targetting all <a> tags.
var navLink = $('.nav a');
navLink.on('click', function(e){
navLink.removeClass('current');
$(this).addClass('current');
});
In this code, the variable gets all instances of the nav links, and if one of them is clicked, will remove the current class from all of the links before adding it onto the one that was clicked.
This jsfiddle will show you it in action: https://jsfiddle.net/td48vcqy/

onclick function requires double click because of class assignment delay

The title says it all. I got a list of LI elements. When clicked on navigation the active li gets a class 'current' but this takes a second.
But when I use my code I need to click on the nav then the li opens and I need to click again to make the code register.
The place of the videos cannot be hardcoded! It needs to be dynamic.
(function($) {
$(document).ready(function(){
$('video').each(function() {
$(this).get(0).pause();
});
$('.slides').children('li').addClass('test');
});
$(document).on('click','span',function(){
if ( $('li').hasClass('current') ) {
$('li.test').find('video').each(function() {
$(this).get(0).pause();
});
$('li.current.test').find('video').each(function() {
$(this).get(0).play();
});
}
});
})(jQuery);
http://codepen.io/hennysmafter/pen/aNrVKG?editors=1010
Unfortunately I won't be available for the next hour or so but will be back after that! Everyone thank you for helping.
I found what is causing the issue :
You are playing the elements whose parent has ".current" class when a span is clicked.
But when you click an element, it et the ".show" class, and the previously selected span get the ".hide" class AND keeps the ".current" class, until the animation is finished (then the ".show" & ".hide" class are removed and the ".current" class switch elements).
One solution is changing the selectors like this :
$(document).on('click','span',function(){
console.log('the if is running');
$('.current, .hide').find('video').each(function() {
$(this).get(0).pause();
});
$('.show').find('video').each(function() {
$(this).get(0).play();
});
});
By doing this, whenever a span is clicked, you pause the element whose parents have the ".hide" class, and play the ones whose parents have the ".show" class.
Another solution should be creating an event when a class is applied (See jQuery - Fire event if CSS class changed).

Toggling show/hide anchored divs

I have a list of Services with their respective descriptions, which I have linked to with anchor links.
The service details are hidden until I click on a service name. I am not being able to hide the previously clicked on services, they are overlapping.
This is a JSFiddle of what I have been able to put together so far:
https://jsfiddle.net/rdhn60mb/
$('#home-header .service-box li a').click(function() {
$($(this).attr('href')).css('display', 'block');
});
/*
$("#home-header .service-box li a").click(function(){
var $name = $(this).text();
var $activebox = ($("#" + $name).length === 0) ;
$("#home-header .service-details").not($activebox).hide();
$("#home-header .service-details").not($activebox).removeClass('active');
$activebox.toggle();
$activebox.toggleClass('active');
});
*/
(The commented out code doesn't work, but it's close to what I'm trying to achieve).
Thank you all for helping me out!
Cintia
I would agree with divy3993's answer but improve it slightly:
$('#home-header .service-box li a').click(function() {
$('.service-details').hide();
$($(this).attr('href')).toggle();
});
The toggle is just a more efficient function in this case.
You can see the example in this Fiddle: https://jsfiddle.net/rockmandew/rdhn60mb/6/
See in your case it's overlapping, as you never close/hide them. So as JavaScript/JQuery runs line by line. We will first close/hide all of them $('.service-details').hide(); onclick and then open/show only the current one.
JQuery
$('#home-header .service-box li a').click(function() {
$('.service-details').hide();
$($(this).attr('href')).css('display', 'block');
});
UPDATE :
Fiddle : Demo
Note: Here in demo i used fadeIn() so it has some smoothing effect. Also using anything else like toggle() is useless. As you are hiding all the service-details before showing so no need of toggle().
To close the div again if the same link is clicked like you wanted.. simple wrap it in an if statment checking if the current active tab has the same id as the href value. If so don't run the show
//if the clicked a element's href is not the same as the active elements id
if( $(this).attr('href') != "#"+$(".active").attr( "id" ) ) {
//remove the current active class
$('.service-details').removeClass( "active" );
//fade in the div
$($(this).attr('href')).fadeIn();
//add the class active to the div
$($(this).attr('href')).addClass( "active" );
}
Here is a jsfiddle with the edits and I also added a fadeout to make it less jumpy
https://jsfiddle.net/rdhn60mb/21/

jQuery Two Tab Containers Using Same Code, How do I Excecute Event Only Inside Clicked Container?

I want to be able to use two identical (only difference are the tab ID's) tab containers with the same piece of jQuery.
I almost got it working, but my problem is that as soon as I click on a tab from one of the Tab boxes (Tab Box One & Tab Box Two), the content of the other container hides.
I think I need to use $this somewhere, or perhaps create a few variables, since I'm repeating my code (DRY, I know I know..)
Any advice on how to not make the two Tab Boxes affect each other? I've tried for hours, but I can't wrap my head around it..
Codepen:
http://codepen.io/StrengthandFreedom/pen/xwKENJ?editors=101
Code:
// Hide content info from all divs
$(".tabContent").hide();
// Show tabContent from the first child of each Tab Box
$(".tabContent:first-child").show();
// Add active class to first list item tab of each Tab Box
$("ul.tabs li:first-child").addClass("active").show();
$("ul.tabs li").click(function() {
// Remove active class on last child
$("ul.tabs li:last-child").removeClass("active")
$(this).prev().removeClass("active");
$(this).next().removeClass("active");
// Add class active to the one clicked
$(this).removeClass("active");
$(this).addClass("active");
// This need to hide only the content of the clicked div
$(".tabContent").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn(1500);
return false;
});
Thank you! :-)
Reduced code.
You can reduce it more..
$(".tabContent").hide();
$(".tabContent:first-child").show();
$("ul.tabs li:first-child").addClass("active").show();
var tabs= $("ul.tabs li");
tabs.click(function() {
tabs.removeClass("active")
$(this).addClass("active");
$(".tabContent").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn(1500);
return false;
});
Update:
as per #nevermind comment
It can be reduce further
tabs.click(function() {
tabs.removeClass("active")
$(this).addClass("active");
// $(".tabContent").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn(1500);
$(activeTab).siblings().hide();
return false;
});
You can use event.target
event.target
<div id='1'/>
<div id='2'/>
in js function you can do like this
if(event.target.id =='1'){
// code goes here
}
else if(event.target.id='2'){
//code goes here
}

Categories