I've got this following code:
<script type="text/javascript">
$(document).ready(function(){
$('.sample1').click(function(){
$('.dropdown-content').toggleClass('visible-dropdown');
})
})
</script>
It adds class so I can get some animations with mouse click event.
I have some more classes in HTML like 'sample2', 'sample3', etc. and would like to add exactly the same animations (classes of course has different content).
I know one solution, namely just add in same code n-times, but change class for each block of code. Is there a shorter way? I thought maybe something with arrays, not sure. I'm not really good in JS, it's like my first time ;)
You can just group the classes, separated by commas. Example :
$('.sample1, .sample2, .sample3').click(function(){
You can edit your code to take multiple selectors.
<script type="text/javascript">
$(document).ready(function(){
$('.sample1, .sample2, .sample3').click(function(){
$('.dropdown-content').toggleClass('visible-dropdown');
})
})
</script>
Simply use multiple selectors:
$('.sample1, .sample2 , .sample3').click(function(){
$('.dropdown-content').toggleClass('visible-dropdown');
})
You could try
$('*[class*="sample"]')
This is the source
You can use css selectors:
Catch the elements which have classes started with 'sample':
$('[class^=sample]').on('click',function(){
//Do something
});
Catch the elements which have classes ended with 'sample':
$('[class$=sample]').on('click',function(){
//Do something
});
To find more information about css selectors:
https://www.w3schools.com/cssref/css_selectors.asp
Related
I need a paragraph to fade out when the button is clicked, and I also need another paragraph to fade in at the same time. I've tried everything I can think of, even formatting differently, but nothing works. My code looks like this
$(document).ready(function() {
$('.s3').addClass('.one');
$('.button1').addClass('.party');
$('.button2').addClass('.bear');
$('.button1').click(function(){
$('.one').fadeOut('fast');
$('.ifparty').fadeIn('slow',1);
});
});
I think you meant to add a class of "one" not ".one". Your selector is not going to pick that up the way you are adding it now. Same with the other addClass() calls.
$(document).ready(function() {
$('.s3').addClass('one');
$('.button1').addClass('party');
$('.button2').addClass('bear');
$('.button1').click(function(){
$('.one').fadeOut(200);
$('.ifparty').fadeIn(2000);
});
A FIDDLE
http://jsfiddle.net/7Gcjp/1/
You dont need to . with class name while adding a class to element.
$('.s3').addClass('one');
I have created an expanding div that hides on load and expands when clicked using javascript and jQuery. My problem is that I need to use this feature multiple times on each page (10-30x). Is there a way to call the function to work with multiple Div ids using an array or something of that nature (I am a newbie, my apologies), e.g. a few of my div ids would be eb1, eb2, eb3, eb4. and here is my script that currently works on one id:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#eb1').hide();
//hides box at the begining
jQuery("#hide").click(function() {
jQuery('#eb1').fadeOut(300);
//jQuery('#the_box').hide();
});
jQuery("#show").click(function() {
jQuery('#eb1').fadeIn(300);
//jQuery('#the_box').show();
});
});
</script>
Any help would be appreciated, even a link to an explanation.
Thanks,
Travis
Further to John Conde's answer this is also possible using attribute-starts-with:
jQuery('div[id^="eb"]').hide();
JS Fiddle demo.
It is, of course, easier to just use a particular class-name, and the selector then becomes:
jQuery('.className').hide();
JS Fiddle demo.
References:
Attribute-starts-with ([attribute^="value"]) selector.
You should be able to do this by separating the ids with a comma:
jQuery('#eb1','#eb2','#eb3').hide();
just type "jquery multiple div show hide" into google:
the first link gives this:
Show/Hide Multiple Divs with Jquery
:)
Maybe it is cleaner to add a css class to all the div (or whatever tag you use) elements that should behave like that, then use that class in the selector ?
jQuery('div.hidable').hide();
//hides all 'hidable' boxes
jQuery("#hide").click(function() {
jQuery('div.hidable').fadeOut(300);
});
etc...
You could create a function to do that.
let me explain
function ToogleDiv(container){
// simple toogle
$(container).toggle();
// a toogle with some effect
$(container).toggle('slow', function() {
// add some action }); }
here's is a Jquery example Toogle Jquery Example
Hope this helps.
You can use Attribute Starts With Selector [name^="value"]
var divs = $('div[id^="eb"]');
$(divs).hide();
$('#show').click(function(){
$(divs).show();
});
$('#hide').click(function(){
$(divs).hide();
});
Live example on JSFiddle
function show(var id){
jQuery(id).fadeIn(300);
}
function hide(var id){
jQuery(id).fadeOut(300);
}
and then, in your divs:
<a id="hide" onClick="hide('eb1')">hide</a>
<a id="show" onClick="show('eb1')">show</a>
<div id="eb1"></div>
This seem like long way of doing things, is it possible to dynamically assign numbers to ids?
$(function () {
$('#Button1').click(function(){
$('#RegularExpressionValidator1, #RegularExpressionValidator2, #RequiredFieldValidator1, #RequiredFieldValidator2, #RequiredFieldValidator3, #RequiredFieldValidator4, #RequiredFieldValidator5, #RequiredFieldValidator6, #RequiredFieldValidator7, #RequiredFieldValidator8, #RequiredFieldValidator9').css("display", "block");
});
});
These are .NET generated ids which I don't have access to.
You can use an "attribute starts with" selector:
$("[id^='RegularExpressionValidator']").css("display", "block");
From the jQuery docs:
This selector can be useful for identifying elements in pages produced
by server-side frameworks that produce HTML with systematic element
IDs. However it will be slower than using a class selector so leverage
classes, if you can, to group like elements.
Have a look at the attributes starts with selector. Using it, you can simply do this:
$(function () {
$('#Button1').click(function(){
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').css("display", "block");
});
});
This will select all elements with an ID starting with RegularExpressionValidator. You may want to specify the element type, as well as a container to look in to select fewer elements.
You may also want to use $.show() instead of $.css():
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').show();
try
$(function () {
$('#Button1').click(function(){
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').css("display", "block");
});
});
Currently I'm using this minor bit of javascript to remove a small list of properties from a single page.
<script>
jQuery(document).ready(function ($) {
$('p').remove('.field-css-classes');
$('p').remove('.field-description');
$('p').remove('.field-link-target');
$('p').remove('.field-xfn');
$('p').remove('.link-to-original');
});
</script>
Being quite/really new with javascript I was wondering if a snippet like this can be even more optimized.
In example to something like this
<script>
jQuery(document).ready(function ($) {
$('p')array.remove('.field-css-classes', '.field-description', '.field-link-target', '.field-xfn', '.link-to-original');
});
</script>
(which, as you can tell, isn't working)
Include the commas in the string....
jQuery(document).ready(function ($) {
$('p').remove('.field-css-classes, .field-description, .field-link-target, .field-xfn, .link-to-original');
});
example at http://jsfiddle.net/gaby/B4q2a/
jQuery selectors allow for comma separated selections
jQuery(function ($) { //aliasing document.ready shortcut
$('p').remove('.class1, .class2, .class3')
});
Really easy, use some simple CSS in your selector
$('p').remove('.field-css-classes, .field-description, .field-link-target, .field-xfn, .link-to-original');
Since, in your example, you only removing classes of the p tags and you're using jquery, you can use jquerys removeClass method. According to the API, you can specify several classes there, like so:
$('p').removeClass('class1 class2 class3');
So, no commas seperating the class names and no leading dots.
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')");
}
});