使用功能寫入.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);