So in jquery, if I want to target a div in the .test class on a click I use the following code:
$('.test div').click(function(){
//do something
});
But if the "do something" part requires a this parameter, I can't seem to get the same effect. So lets say I want to make all bold text in any div with class test fade out. I would have to do something like this:
$('.test div').click(function(){
$(this ' b').animate({
opacity:toggle
},500);
});
But that is invalid code. So How would I target a specific element in a this Jquery selector?
You need to pass the context as the second parameter to jQuery
$('b', this).animate({
opacity:toggle
},500)
Another solution is to use .find()
$(this).find('b').animate({
opacity:toggle
},500)
Below code will help you to do this
$(".test").click(function () {
$("b", this).fadeToggle(500);
});
Take a look at this jqfaq.com site,it has more jquery related faqs. It may be helpful to you.
Related
so my code which should add a class to an element if the body has a certain class doesnt work. It looks like this:
if ($("body").hasClass("shifter-open")) {
$(".scrollheader").addClass("hovered");
}
I think its because a Jquery code adds this class (shifter-open) to the body with this code:
$( document ).ready(function() {
$("body").addClass("shifter shifter-active");
$('.shifter-handle').click( function() {
$("body").toggleClass("shifter-open", 1000);
});
});
Is there a way to make my code work? and maybe combine these 2 codes into one?
Your conditional :
if ($("body").hasClass("shifter-open")) {
$(".scrollheader").addClass("hovered");
}
Is only going to be evaluated once unless you have a timeout or interval polling it. A better solution might be to combine those two sections into one. Such as:
$( document ).ready(function() {
$("body").addClass("shifter shifter-active");
$('.shifter-handle').click( function() {
$("body").toggleClass("shifter-open", 1000);
$(".scrollheader").toggleClass("hovered");
});
});
Or something like that. You might also want to check the documentation for toggleClass because it doesn't appear to take an integer as a second parameter
Assuming you want to remove the class as well, just imitate exactly what the body is doing. You can toggle the class hovered on your .scrollheader just as the body is toggling its shift-open class.
$( document ).ready(function() {
$("body").addClass("shifter shifter-active");
$('.shifter-handle').click( function() { //When shifter-handle is clicked
$("body").toggleClass("shifter-open"); //Toggle "shifter-open" on the body
$(".scrollheader").toggleClass("hovered"); //Toggle "hovered" on .scrollheader
});
});
Additionally, the second parameter of toggleClass() takes a boolean that determines if the toggle should activate. Your second parameter of 1000 is permanently truthy, so there is no reason at all to include it.
I'm trying to code a simple show/hide div using jQuery. Basically, when I click on .artist-ken, I want the artists-home div to disappear and .ken-gallery to replace it.
So far, I have this, but it's not doing anything except jumping to the top of the page:
$('.artist-ken').click(function(){
$('.artists-home').hide().show('ken-gallery');
});
Try this:
$('.artist-ken').click(function(e){
e.preventDefault();
$('.artists-home').hide();
$('.ken-gallery').show();
});
Function preventDefault() will stop from jumping in the page. You need separate show for displaying another div. Also . was missing in the ken-gallery.
jQuery.show() doesn't take a selector as a first parameter, try this instead:
$('.artist-ken').click(function(){
$('.artists-home').hide();
$('.ken-gallery').show();
});
I'm assuming that the element that you want to hide has the class ".ken-gallery" and that the element that you want to show has the class: ".artists-home"
$('.artist-ken').click(function(e){
e.preventDefault();
$(".artists-home").hide( 0, function() {
$('.ken-gallery').show();
});
});
Try this
$('.artist-ken').click(function(e){
e.preventDefault();
$('.artists-home').hide();
$('.ken-gallery').show();
});
What you did was not a real parameter for the show() function. Plus even if it were you didn't specify that it was a class. It can only take a function, duration, nothing, or object refer to the jQuery show reference page You can also create a one way listener to show or hide the other.
$(document).click(function(e){
if( e.target.classList.contains('artists-home') ) {
e.preventDefault();
$(e.target).hide();
$('.ken-gallery').show();
}else if( e.target.classList.contains('ken-gallery') ){
e.preventDefault();
$(e.target).hide();
$('.artists-home').show();
}
});
Also what Chonger was saying, is if you wanted a fade which is the duration parameter for any of the show/hide and other animated properties of jQuery, then we would use a callback. So my single function listener would then become.
$(document).click(function(e){
if( e.target.classList.contains('artists-home') ) {
$(e.target).hide(500,function(){
$('.ken-gallery').show();
});
}else if( e.target.classList.contains('ken-gallery') ){
$(e.target).hide(500,function(){
$('.artists-home').show();
});
}
});
EDIT
Reread your question, these must be links for the page to jump to top so I added to the functions.
Dude show() cant have parameter in () Brackets except Speed Or way of animation like show('slow') OR show('1000') is only valid .
Your syntax is wrong
The following is valid syntax.
It means , hide div with class ".artists-home" and show with class ".ken-gallery".
$('.artist-ken').click(function(){
$('.artists-home').hide();
$('.ken-gallery').show();
});
For more info show
My goal is to change the background color of an element and one of its siblings that is higher in the DOM but in the same parent on hover. I was able to use css transition to change the first element but i couldn't get the sibling to change. so I looked into jquery UI addClass effect
I wanted the code below to work since I couldn't get a css solution to work, the goal was to change both elements on hover
$(document).ready(function(){
$('.circletag').hover(function() {
$(this).addClass( "red");
$(this).parent().find('title').addClass('red', 2000);
}, function() {
$(this).removeClass('red', 5000);
$(this).parent().find('title').removeClass('red', 2000);
});
})
I was able to get a fade effect on the $(this) elements but the .title element is not showing any changes at all.
when .circletag is hovered I would like .circletag backgroud to change and the .title background to change at the same time over a 2 second interval. If It cant be done with css which is the way I would prefer the solution I would appreciate a jquery one.
Also I'm curios to know why the console says
SyntaxError: syntax error
.ui-helper-hidden {
Why does the duration not work in this addClass function when im using jquery ui? So weird for me.
why is it that when the mouse is moves off the element it does not take 5 seconds to remove the class? it looks like the css transition rule is calling the shots.
basically I want the div with the class of .title's backgound and .circletag background to fade in and out on hover of .circletag.
jsfiddle
Thanks for your help guys.
Try it like this:
$(document).ready(function(event){
$('.circletag').hover(function() {
$(this).addClass( "red");
$(this).parent().find('.title').addClass('red', 2000);
}, function() {
$(this).removeClass('red', 5000);
$(this).parent().find('.title').removeClass('red', 2000);
});
})
You need to specify the class selector in 'find' function..
Let me know :)
Try this,
$(this).parent().find('.title').addClass('red', 2000);
you need to use ".title" inside your find() if you are referring a class.
Fiddle
Hope this helps.
I have a use case whereby i know that all the divs i am interested in will have the word 'tabz' in them but have yet to find a way to fire my jquery when a user clicks on a div with such an id.
$('div[id=*"tabz"]').on("click", function()
{
alert(event.target.id);
});
This is what i have however the alert never fires.
When I replace the method with :
$('div').on("click", function()
{
alert(event.target.id);
});
it will give me the following:
tabz91
So i know there are divs that meet my selector but it I am unsure as to why the alert is not firing.
Any help greatly appreciated
The correct syntax is simply
$('div[id*="tabz"]')
(the = and the * are inverted in your example).
You may use
$('div[id$="tabz"]')
if the id attribute ends with your pattern.
$('div[id*="tabz"]').on("click", function()
{
alert(event.target.id);
});
It's a typo, * and = inverted. See this example : http://jsfiddle.net/Xcn6N/
try instead of =* it is *=
$('div[id*="tabz"]').on("click", function() {
alert(event.target.id);
});
For Further Assistance on Selectors in jQuery see this page
jQuery Selectors
I'm using a script where I need to make multiple events to make a popup appear.
I tried this, but it doesnt work:
for (i=0;i<=storingen;i++)
{
$("#storing" + i).click(function(){ centerPopup(); loadPopup(); });
}
The output should be:
$("#storing0").click(function(){ centerPopup(); loadPopup(); });
$("#storing1").click(function(){ centerPopup(); loadPopup(); });
$("#storing2").click(function(){ centerPopup(); loadPopup(); });
$("#storing3").click(function(){ centerPopup(); loadPopup(); });
etc.
But the amount of divs with the id #storing(number here) is variable, so i wanted to make this, but it doesnt work...
I get the storingen variable from php:
<script type="text/javascript">aantalstoringen('.$aantalstoringen.')</script>
which i pick up in the js file like this:
function aantalstoringen(storingen){
storingen=storingen;
}
I did an alert(storingen), which traced the right number, so that is ok.
COuld it be that the for loop doesnt work because that isnt in the aantalstoringen function, but in another function:
$(document).ready(function() {
I used this tutorial to make the javascript:
http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/#popup1
and the script you get is this:
http://yensdesign.com/tutorials/popupjquery/popup.js
Use the [name^="value"] selector instead:
$('[id^="storing"]').click(function(){ ... });
Basically, it's saying "find all elements whose ID begins with 'storing'."
If you need it more explicit, you can test the id inside a each() to apply better filtering. e.g.
$('[id^="storing"]')
// make sure all IDs end in a number
.each(function(i,e){
if (/\d$/.test(e.id)) {
// now that we only have ids that begin with storing and end in
// a number, bind the click event
$(e).click(function(e){ ... });
}
});
You don't create dozens of event listeners that call the same handler. You create one listener on a higher level in the DOM and make it react only if the ID of the target matches the pattern.
This is why libs like jQuery are teaching kids bad manners... -.-
It could be any number of things. It would help if you showed us more of the code, like all of the aantalstoringen function.
The following should work:
function aantalstoringen(storingen) {
$(document).ready(function() {
for (i=0;i<=storingen;i++) {
$("#storing" + i).click(function(){ centerPopup(); loadPopup(); });
}
});
}
That said, this is a really bad way to do this. I would have each of your elements also include class="storing". Then you don't have to get the number of objects from the server:
$(document).ready(function() {
$(".storing").click(function(){ centerPopup(); loadPopup(); });
});
First you give a class name to the div like class="popupDiv". Then you try something like this
$('.popupDiv').live('click', function(){
// var id = $(this).attr('id'); By doing so you will get the current id of the div too.
centerPopup();
loadPopup();
});
As Brad correctly said, you don't have to know the amount of such elements, you can just iterate over all element having id starting with something.
So your code would be:
$(document).ready(function() {
$('[id^="storing"]').click(function() {
centerPopup();
loadPopup();
});
});