I have two divs with id's: #addNew_tab and #sendCom_tab.
I'd like clicking on either of these to trigger the same jQuery click() function.
I was thinking something like:
$("#addNew_tab", "#sendCom_tab").click(function(){
//do stuff
});
but that doesn't work.
$("#addNew_tab, #sendCom_tab").click(function(){
//do stuff
});
Changed from:
$("#addNew_tab", "#sendCom_tab")
To:
$("#addNew_tab, #sendCom_tab")
comma inside the selector("a, b") means the first plus the second; Just like with CSS selectors
(Well, it's a CSS selector...)
jQuery(selector)
Description: Accepts a string containing a CSS selector which is then used to match a set of elements.
It's equal to:
$("#addNew_tab").add("#sendCom_tab")...
function doStuff() {
// do stuff
}
$("#addNew_tab").click(doStuff);
$("#sendCom_tab").click(doStuff);
Related
I know this is a silly question but how can I toggleClass() in a single line to both selectors.
$('.search-ico').click(function(){
$(this).toggleClass('is-active');
$('.class').toggleClass('is-active');
});
I tried below:
$('.search-ico').click(function(){
$(this,'.class').toggleClass('is-active');
});
but it's not working (only this is taking the class).
Thanks
you can use the .add method to combine string selectors and this.
https://api.jquery.com/add/
Use it like this:
$(this).add('.class').toggleClass(...)
Assuming the elements of class search-ico carry an id attribute, you can compose the selector string:
$("#" + $(this).attr('id') + ", .class").toggleClass("is-active")
note you can also add properties to the first object before adding a second object to it, and whatever property you add after the second object applies to all of them..
$(this).css('property','value').add('.class').toggleClass(...)
so here the css property of (this) is altered first.. before added to the second object, and then the toggleClass applied to all of them..
so I have this function below...
<script>
$('.tile').on('click', function () {
$(".tile").addClass("flipOutX");
setTimeout(function(){
$(".tile-group.six").load("musability-musictherapy-company-overview.html");
}, 2000);
});
</script>
I basically want to change the css attributes of tile-group.six to have a different margin. Any ideas how I might go about this ?
you should take a look at the .css() function of jQuery
like
$(".tile-group.six").css('margin-left', '50px');
and so on
$(".tile-group.six").css({margin:"0"});
This should be what you're after.
As Phylogenesis pointed out in his comment on the below answer, this method can be used to change multiple CSS values at once using a comma delimiter e.g.
$(".tile-group.six").css({margin:"0", padding:"0"});
I have a function in which I want the selector that I am passing to do the enclosed processes. The functions are listed below:
function menuselector (id){
$(id).css('background', 'url(../img/black_denim.png) repeat');
$(id).css('color', '#FFF');
}
function menudeselector (id){
$(id).css('background', 'none');
$(id).css('color', '#CE0101');
}
menuselector('mgi');
mgi is an ID of a div tag
Ids are targeted by using a hash before the id, the same as in CSS.
If you're passing
menuselector('mgi');
You will need to adjust it to make it a valid selector.
$('#' + id).css(...
or you can send the valid selector
menuselector('#mgi');
assuming you have an element with that id (you haven't shown that)
<div id="mgi">
Aside
You shouldn't keep selecting the element. You can either chain
$(id).css('background', 'none').css('color', '#CE0101');
// on new lines for readability if there are a lot of actions
$(id).css('background', 'none')
.css('color', '#CE0101');
or use an object
$(id).css({background: 'none', color: '#CE0101'});
mgi is not a valid selector. You should write:
menusector('#mgi');
or
menuselector('.mgi');
depending on whether you want to select an ID or a class.
You could use popnoodle's solution, if your function should only be applicable to IDs, although making it restrictive like that seems like poor generality.
Just pass '#mgi' if it is an ID:
menuselector('#mgi');
I'm having some trouble writing a function to change a background image on a div on document.ready
I haven't made a jsfiddle as i think the problem is just my poor (but improving) jQuery skills. Please let me know if you think one is needed.
Background Info ->
I have a collection of div's with a class of portlet-visible or portlet-hidden, each of these div's will have another class of red-arrow (or a different color, but once i have one color it should be easy to extrapolate). When the page loads i would like a function that can find all divs with a class of portlet-hidden or portlet-visible and see if those have a class of red-arrow. If they do then change the background image src to a different value.
Im really struggling to work this one out, and any help is much appreciated.
My HTML
<div class="portlet-visible red-arrow"></div>
My CSS
div.portlet-visible
{
position:absolute;
top:12px;
right:10px;
background-image:url(../images/red-arrow-up.png);
width:14px;
height:14px;
}
And finally my javascript
$(document).ready(function() {
$(".portlet-hidden" && ".portlet-visible").each(function() {
if ($("this").hasClass(".red-arrow")) {
$(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')
};
});
});
Multiple selectors should be separated by a comma(,) and also css method takes a string or a map. Try this.
$(document).ready(function() {
$(".portlet-hidden, .portlet-visible").each(function() {
if ($(this).hasClass("red-arrow")) {
$(this).css('background-image', "url('../images/blue-arrow-up.png')")
};
});
});
I would have written the selector this way
$(".portlet-hidden, .portlet-visible")
Unless there's a specific reason you want to do this with jQuery you should just use CSS...
div.portlet-visible
{
background-image:url(../images/red-arrow-up.png);
width:14px;
height:14px;
}
div.portlet-visible.red-arrow
{
background-image:url(../images/blue-arrow-up.png);
}
Any div with the class "portlet-visible" is defined in the first block, and any div with the classes "portlet-visible" and "red-arrow" will use the same css, but also apply the new background image.
http://jsfiddle.net/johncmolyneux/gcm5b/
First... Archer's answer is spot on-- what you're trying to do with jQuery can be done with CSS alone.
But if for some reason you do need jQuery, a few things are wrong here.
First, as justtkt said in his answer, your selector is wrong. There is no need (and is syntactically wrong) to use conditional operators like && or || in a jQuery selector. This is simply because there is already conditional syntax built in to CSS, upon which jQuery selectors are directly based.
.this-class.that-class
Selects all elements with both .this-class, and .that-class.
#this-id.that-class
Is a very (possibly overly) specific declaration that select an element (there should only be one ID per page) with both #this-id and .that-class
For more on selectors, please read this very thorough, complete, and educational link http://www.w3.org/TR/selectors/
Additionally and importantly
This line:
$("this").hasClass(".red-arrow")
Is wrong! hasClass does not require a selector (the ".") because it only takes a class. It should be
$("this").hasClass("red-arrow")
Also!!
$(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')
This line has some errors... should be:
$(this).css("background-image", "url(../images/blue-arrow-up.png)")
although I think the following syntax is easier:
css({'background-image' : 'url(../images/blue-arrow-up.png)'})
Your selector is just incorrect. If you want to match things with both classes, it'd be:
$('.portlet-hidden.portlet-visible').each( ...
If you want to match either of the classes:
$('.portlet-hidden, .portlet-visible').each( ...
The expression ".portlet-hidden" && ".portlet-visible" will always evaluate to just ".portlet-visible".
Instead of && two selectors together, use the multiple selector like $(".portlet-hidden, .portlet-visible") or the .add() method to build up your jQuery.
Your current line is actually anding the two strings together, which I believe will return boolean true in Javascript.
if ('$("this").hasClass(".red-arrow")') { <--- this condition is a string here
Should be:
if ($(this).hasClass(".red-arrow")) {
change in selector ".portlet-hidden,.portlet-visible"
change if condition to boolean from string
change in css.
$(".portlet-hidden,.portlet-visible").each(function(){
if ($("this").hasClass("red-arrow")){
$(this).css("background-image", "url('../images/blue-arrow-up.png')");
}
});
I have a few links that look like this:
...
How can I bind a function to all elements that have a class that starts with "rotate-" ?
You can use starts with selector like this:
$('a[class^="rotate-"]')
Description: Selects elements that
have the specified attribute with a
value beginning exactly with a given
string.
So your code should be:
$('a[class^="rotate-"]').click(function(){
// do stuff
});
Note: If you want to find out elements that contain certain text anywhere in their attributes, you should do this instead:
$('a[class*="rotate-"]').click(function(){
// do stuff
});