javascript - for loop to make events - javascript

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();
});
});

Related

The second div won't come back after it's clicked twice

I'm not really good at JQUERY, and I just tend to observe things, but here is a code I've been working on. So the goal here is that I want both .people and .people_bg to close when I click anywhere on my screen.
<script>
$(document).ready(function(){
$("#relations").click(function(){
$(".people").slideToggle("fast");
$(".people_bg").slideToggle("fast");
});
});
$('a.close, .people_bg').live('click', function() {
$('.people_bg , .people').fadeOut(function() {
$('.people_bg, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
The problem is: It only works once. The second time around, only '.people' appears, and not '.people_bg'
The remove function that you're using actually deletes elements from the page altogether, so that's your culprit. Replace that with a more appropriate function and you should be just fine.
You can simply just fadeOut without remove. This will hide them without actually removing them from the page: JS FIDDLE
$('a.close, .people_bg').on('click', function () {
$('.people_bg , .people').fadeOut();
});
Additionally, in your first function, you can combine the two class selectors:
$("#relations").click(function () {
$(".people, .people_bg").slideToggle("fast");
});
Also note that you should be using jquery's .on() as of version 1.7 instead of .live().

jquery on click event; call specific function if available

I need a solution for my problem.
I need to execute if any rule matches with jquery click, and execute general match.
For example;
I have multiple elements like a.option.
So:
$(function(){
$('a.option').click(function(){
//do something
});
});
But, i have some exceptions like a.option.model.
So:
$(function(){
$('a.option.model').click(function(){
//do this first;
});
$('a.option').click(function(){
//go here after first one in finished!
});
});
I don't want to make statement in general click function...
How can i do this?
This should work
$(function(){
$('a.option').click(function(){
// code called first for both cases goes here
if($(this).hasClass('model')) {
// code called only for .model goes here
}
});
});

Show/hide jQuery function not working

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

fadeOut an image (has an id) on click of the image (so the ID is unknown until the click)

Let's say I have 10 images on a page, and I want to hide an image when clicking on it.
Each image has an id like: figure1, figure2, figure3, figure i++.
Of course I could write this
$('#figure1').on('click', function() {
$(this).hide();
});
$('#figure2').on('click', function() {
$(this).hide();
});
$('#figure3').on('click', function() {
$(this).hide();
});
and so on but obviously that's not good.
The other thing I thought was creating a function and triggering it with onclick="theFunction(id)", so then I could hide the right image within the function as it knows the id of the image, but when the page loads, obviously JS doesn't know which ID I'm going to delete. How could I make this dynamic?
Any suggestions?
Err I was using class instead of ID in my function :/
function deletePhoto(photo_id, photoPosition) {
$('#photoFigure' + photoPosition).fadeOut(2000);
}
Called like:
<div class="deletePhoto" onclick="deletePhoto({$value['id']}, {$i})">delete</div>
You can give all of them a common class name say figure and use that as the selector:
$('.figure').on('click', function() {
$(this).hide();
});
Or with what you have you could go with attribute starts-with selector
$('[id^="figure"]').on('click', function() {
$(this).hide();
});
or just combine all of them and make a long and ugly selector:
$('#figure1, #figure2, #figure3').on('click', function(){
$(this).hide();
});
For the second part of your question, you can remove those inline click attribute and add a data-attribute save the photoid as is there and just use it to delete, if you have a consistent html structure then you dont event need that, you can select the photo relative to the deletePhoto button.
<div class="deletePhoto" data-photoid="#photoFigure{$i}">delete</div>
and
$('.deletePhoto').on('click', function(){
$($(this).data('photoid')).fadeOut(2000);
//<-- fade out won't delete the element from DOM instead if you really want to remove then try as mentioned below.
//$($(this).data('photoid')).fadeOut(2000, function(){$(this).remove();});
});
OR Could use multiple Select them like this:
Also plz note you are missing ) in your JQ code.
Link : http://api.jquery.com/multiple-selector/
Sample code
$('#figure1,#figure2,#figure2').on('click', function() {
$(this).hide();
});
$(body).on('click','img',function() {
var fig = $(this).attr('id');
$('#' + fig).fadeOut();
});

specific element in `this` with jquery

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.

Categories