I am trying to loop my .hide() and .show() click handlers and I can't get this simple part to work correctly. My buttons are called "#towele" etc. I'm assuminig I'm missing something stupid and obvious. All of the divs are hidden in css.
var elements = ["wele", "slides", "projects", "pages"];
for (i=0;i<=elements.length-1;i++){
$("#to"+elements[i]).click(function() {
$("#"+elements[i]).show();
});
}
/UPDATE:------------------------------------------------------------------------
The following code is the code I am trying to minify.
$("#toprojects").click(function(){
$("#projects").show();
$("#slides").hide();
$("#pages").hide();
$("#wele").hide();
});
$("#toslides").click(function(){
$("#projects").hide();
$("#slides").show();
$("#pages").hide();
$("#wele").hide();
});
$("#topages").click(function(){
$("#projects").hide();
$("#slides").hide();
$("#pages").show();
$("#wele").hide();
});
if(window.location.hash === "#slides"){
$("#projects").hide();
$("#slides").show();
$("#pages").hide();
$("#wele").hide();
}
if(window.location.hash === "#projects"){
$("#projects").show();
$("#slides").hide();
$("#pages").hide();
$("#wele").hide();
}
if(window.location.hash === "#pages"){
$("#projects").hide();
$("#slides").hide();
$("#pages").show();
$("#wele").hide();
}
found a related post here and it solved it pretty nicely jQuery: Set click from array loop
I am trying to loop my .hide() and .show() click handlers and I can't get this simple part to work correctly. My buttons are called "#towele" etc. I'm assuminig I'm missing something stupid and obvious. All of the divs are hidden in css.
var elements = ["wele", "slides", "projects", "pages"];
for (i=0;i<=elements.length-1;i++){
$("#to"+elements[i]).click(function() {
$("#"+elements[i]).show();
});
}
/UPDATE:------------------------------------------------------------------------
The following code is the code I am trying to minify.
$("#toprojects").click(function(){
$("#projects").show();
$("#slides").hide();
$("#pages").hide();
$("#wele").hide();
});
$("#toslides").click(function(){
$("#projects").hide();
$("#slides").show();
$("#pages").hide();
$("#wele").hide();
});
$("#topages").click(function(){
$("#projects").hide();
$("#slides").hide();
$("#pages").show();
$("#wele").hide();
});
if(window.location.hash === "#slides"){
$("#projects").hide();
$("#slides").show();
$("#pages").hide();
$("#wele").hide();
}
if(window.location.hash === "#projects"){
$("#projects").show();
$("#slides").hide();
$("#pages").hide();
$("#wele").hide();
}
if(window.location.hash === "#pages"){
$("#projects").hide();
$("#slides").hide();
$("#pages").show();
$("#wele").hide();
}
found a related post here and it solved it pretty nicely jQuery: Set click from array loop
I haven't tested this, but I think something along these lines should work for you:
var elements = ["wele", "slides", "projects", "pages"];
var clickHandler = function(element) {
var id = element.attr('id') || $(this).attr('id');
$.each(elements, function(index, value) {
var element = $('#' + value);
if (id !== 'to' + element.attr('id')) {
element.hide();
} else {
element.show();
}
});
};
$.each(elements, function(index, value) {
$('#to' + value).click(clickHandler);
});
if ($.inArray(window.location.hash, elements)) {
var id = window.location.hash.substring(1);
clickHandler($('#' + id));
}
var elements = ["wele", "slides", "projects", "pages"];
jQuery.each(elements,function(){
element = this;
$("#to"+element).live("click",function() {
$("#"+element).show(); // use toggle for hiding/show as per current state
});
});
You are running into an issue with closure. The value of i, regardless of which element is clicked, will be 4. There are many ways around it, but jQuery offers a particularly convenient one, the each function:
var elements = ["wele", "slides", "projects", "pages"];
$.each(elements, function(index, element) {
$("#to" + element).click(function() {
$("#" + element).show();
});
});
We need to see more of your code to be sure, but the obvious things that might be missing are:
$(document).ready() method. Simply wrap all the above code inside the $(document).ready() {} function, and it should work.You also need to pass the i variable into the click function, as it won't actually get called until later, and the original value of i will have long since disappeared by then.
$(document).ready() {
var elements = ["wele", "slides", "projects", "pages"];
for (i=0;i<=elements.length-1;i++){
$("#to"+elements[i]).click(function(i) {
$("#"+elements[i]).show();
});
}
}
As others have suggested, you could refactor the loop to use .each(), but I don't see any point in that. I might have used for(i in elements) {...} instead, but the syntax you've used is fine.
Looking at your updates with the code you're 'trying to minify', I think a different approach may work just as well. Using the JQuery toggle() function and some class names as well as the IDs, you can put the whole thing into a few lines, without needing a loop at all. Something like this:
$(".to-button").click(function(){
var name = $(this).attr('id').replace(/^to/,'');
$(".infopanel").hide();
$("#"+name).show();
});
Then your HTML code would have classes like so:
<div id='toprojects' class='to-button'>Projects</div>
and
<div id='projects' class='infopanel'>info about projects here...</div>
and similarly for slides, pages and wele.
I was trying to e up with a way to bine the hide() and show() lines into one using .toggle() with the showorhide flag, but it's too early in the morning to be thinking too hard. ;-) I'm sure there is a way though.