使用功能写入.js文件

Question

我从来没有特别使用JS太多，基本动画之外，

我工作的页面需要我淡出积极股利和褪色的要求一个进来，我有大约25个不同的div，我会在之间淡出。目前我无法想到如何淡化活跃的一个，所以我试图淡化每个div而不是要求的那个。

这里是我试图获得工作

var active = 0; 

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

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

当然，我知道该文件撰写不应该出现的代码，但最好到js文件我的代码已经被打印然而，使用。我不知道如何将它打印到.js。

任何建议将不胜感激，或一种方法来在没有页面重新加载的PHP这样做！

Answer 1

当你发现自己生成的飞行代码，它通常表示要退后一步，重新评估你的方法。 :-)

在这种情况下，不需要动态创建JavaScript。这只是一个运行代码的问题。

我不知道你的“积极”的定义是，所以这里的东西，消失的div输入/输出的基础上，按什么按钮：

的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> 

JavaScript的（教学版）：

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

，这是否：

1. 使用jQuery的ready功能（快捷方式的形式，我只是传递函数为jQuery功能）时，页面是“准备”来运行代码（DOM已建成）
2. 查找我们想要处理的所有div。在我的情况下，它是一个容器中的所有div，但您只需使用约any CSS3 selector（and then some）。
3. 使用not与类选择器筛选出具有目标类的div，然后使用fadeOut开始淡出其他的。
4. 使用filter减少设置为我们的目标div，并fadeIn开始淡入。

该版本是为了清晰起见。这里有一个更简洁的版本（仍然非常清楚，谁知道jQuery的很好的人，但狡猾的人仍在寻找他们的脚）：

中的JavaScript（使用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

Answer 2

不知道你为什么使用document.write而不是简单地执行javascript。

var active = 0; 

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

此外，尝试使用jQuery选择通过增加一个额外的类每个div来选择所有的非活动的div：

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

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

你甚至可以只选择那些不可见的div活跃的一个，并淡出出来：

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

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