Use function to write to .js file

I've never particularly used JS much, with the exception of basic animations,

The page I'm working on requires me to fade out the active div and fade the requested one in, I have around 25 different div's I'll be fa开发者_JAVA技巧ding between. At the minute I can't think of how to only fade the active one out so I'm trying to fade every div but the one that's requested out.

Here's the code I'm attempting to get working

    var active = 0;

for (i=0;i<array.length;i++) {
if (i != active){

document.write("$('."+array[i]+"').fadeOut(900);");
}

naturally i know the document.write shouldn't be there, but ideally that code has to be printed into the .js file I'm using, however. I don't have a clue how to print it to the .js.

any suggestions would be greatly appreciated, or a way to do this in php without a page reload!

---

When you find yourself generating code on the fly, it usually indicates that you want to take a step back and re-evaluate your approach. :-)

In this case, there's no need to create the JavaScript dynamically. It's just a matter of running the code.

I wasn't sure what your definition of "active" was, so here's something that fades divs in/out on the basis of what buttons you press:

The HTML:

<input type='button' value='1'>
<input type='button' value='2'>
<input type='button' value='3'>
<input type='button' value='4'>
<input type='button' value='5'>
<input type='button' value='6'>
<div id='container'>
  <div class='c1'>This is c1</div>
  <div class='c2'>This is c2</div>
  <div class='c3'>This is c3</div>
  <div class='c4'>This is c4</div>
  <div class='c5'>This is c5</div>
  <div class='c6'>This is c6</div>
</div>

The JavaScript (teaching version):

jQuery(function($) {

  // Hook our buttons; this selector hooks all of them,
  // so you probably want to narrow that down, but I
  // have no idea what your definition of "active" is,
  // so I made one up.
  $(":button").click(function() {

    // Get the value of the button, e.g., 1, 2
    var val = this.value; 

    // Get all of the divs in the container
    var divs = $("#container div");

    // Fade out all of the ones that aren't our target;
    // fade in the one that is
    divs.not(".c" + val).fadeOut(900);
    divs.filter(".c" + val).fadeIn(900);
  });

});

Live copy

That does this:

1. Uses the jQuery ready function (the shortcut form where I just pass a function into the jQuery function) to run the code when the page is "ready" (the DOM has been built)
2. Looks up all divs we want to be dealing with. In my case, it's all the divs in a container, but you can use just about any CSS3 selector you want (and then some).
3. Uses not with a class selector to filter out the div that has the target class, then uses fadeOut to start fading the other ones out.
4. Uses filter to reduce the set to just our target div, and fadeIn to start fading it in.

That version is for clarity. Here's a more concise version (still perfectly clear to people who know jQuery well, but tricky for folks still finding their feet):

The JavaScript (chained version using end):

jQuery(function($) {

  // Hook our buttons; this selector hooks all of them,
  // so you probably want to narrow that down, but I
  // have no idea what your definition of "active" is,
  // so I made one up.
  $(":button").click(function() {

    // Get the value of the button, e.g., 1, 2
    var val = this.value; 

    // Get all of the divs in the container
    // Fade out all of the ones that aren't our target;
    // fade in the one that is
    $("#container div")
      .not(".c" + val).fadeOut(900)
      .end()
      .filter(".c" + val).fadeIn(900);
  });

});

Live copy

---

Not sure why you are using document.write instead of simply executing the javascript.

var active = 0;

for (i=0;i<array.length;i++) {
if (i != active) {
    $("."+array[i]).fadeOut(900);
}

Additionally, try using a jQuery selector to select all the non-active divs by adding an additional class to each div:

var active = array[0];
var classname = "some_class";

$("div." + classname + ":not(." + active + ")").fadeOut(900);

You could even just select the visible divs that are not the active one and fade them out:

var active = array[0];
var classname = "some_class";

$("div." + classname + ":not(." + active + "):visible").fadeOut(900);