2008-09-24 61 views
7

我寫了很多動態生成的內容(在PHP下開發),我使用jQuery爲我的項目添加了額外的靈活性和功能。如何實現動態內容生成的不顯眼的JavaScript?

事情是,它很難以不顯眼的方式添加JavaScript。以下是一個示例:

您必須生成隨機數div元素,每個元素具有不同的功能觸發onClick。我可以使用div元素上的onclick屬性來調用帶有參數的JS函數,但這只是一個不好的解決方案。此外,我可以在我的PHP for循環中隨每個div一起生成一些jQuery代碼,但這又不會完全不引人注目。

那麼這種情況下的解決方案是什麼?

+0

你能提供一個不太模糊的例子嗎?不引人注意的JavaScript的一般方法是,你可以在沒有JavaScript的情況下工作,然後添加JavaScript,它可以在頁面加載時做任何它需要做的事情,以啓用它提供的任何增強功能,因此該頁面適用於所有人。 – 2008-09-24 10:30:52

+0

優雅的退化是我關注使用不同方法的一個方面。雖然你說得對,但你說得對。 – Brayn 2008-09-24 10:46:35

+0

div元素在渲染時是否需要在頁面上?即它們是否包含頁面上所需的有價值的內容,或者它們是否只是增加了功能? – roryf 2008-09-24 17:30:41

回答

5

您需要添加一些定義是什麼類型的行爲他們,然後使用jQuery選擇這些div並添加行爲的div。一種選擇是使用類屬性,雖然可以說這應該用於表示而不是行爲。另一種選擇是rel屬性,但我通常會發現,您還希望爲每個行爲指定不同的CSS,因此在此實例中,類可能是可以的。

因此,舉例來說,讓我們假設你想奇數和偶數行爲:

<div class="odd">...</div> 
<div class="even">...</div> 
<div class="odd">...</div> 
<div class="even">...</div> 

然後在jQuery的:

$(document).load(function() { 
$('.odd').click(function(el) { 
// do stuff 
}); 
$('.even').click(function(el) { 
// dostuff 
}); 
}); 

jQuery有,可以找到基於任何基於CSS的一個非常強大的選擇器引擎選擇器,還支持一些XPath和它自己的選擇器。瞭解他們! http://docs.jquery.com/Selectors

0

這是一個有點難以從你的問題告訴我們,但也許你可以使用不同的jQuery選擇設置不同的點擊行爲?例如,假設你有以下情況:

<div class="section-1"> 
    <div></div> 
</div> 
<div class="section-2"> 
    <div></div> 
</div> 

也許你可以做jQuery中的以下內容:

$('.section-1 div').onclick(...one set of functionality...); 
$('.section-2 div').onclick(...another set of functionality...); 

基本上,基於上下文需要採取什麼決定。您也可以選擇所有div並測試某些父元素或子元素以確定它們獲得的功能。

我不得不更多地瞭解你的情況的細節給予更多的關注意見,但也許這將讓你開始。

1

我會建議不顧W3C標準,並在需要連接到他們的處理程序的元素寫出HTML屬性:

注:這會不會打破頁面的呈現!

<ul> 
    <li handler="doAlertOne"></li> 
    <li handler="doAlertTwo"></li> 
    <li handler="doAlertThree"></li> 
</ul> 

聲明幾個功能:

function doAlertOne() { } 
function doAlertTwo() { } 
function doAlertThree() { } 

然後使用jQuery像這樣:

$("ul li").each(function() 
{ 
    switch($(this).attr("handler")) 
    { 
     case "doAlertOne": 
      doAlertOne(); 
      break; 

     case ... etc. 
    } 
}); 

務實。

2

我會建議你使用這個東西叫做「Event delegation」。這是它的工作原理。

所以,如果你想更新一個區域,比如說一個div,並且你想不加區分地處理事件,你可以在這個div上附加一個事件處理函數。使用你喜歡的任何框架來做到這一點。無論您是否更新了div,事件附件都可以隨時發生。

附加到此div的事件處理程序將接收事件對象作爲其參數之一。使用這個事件對象,你可以確定哪個元素觸發了事件。您可以更新div的次數:div的子元素生成的事件會冒泡到div,您可以捕捉並處理它們。

如果您正在考慮將多個處理程序附加到div內的多個元素,這也證明是一個巨大的性能優化。