使用選擇器時傳輸函數參數的好方法是什麼？

我想我的HTML從我的js隔離通過更換以下使用選擇器時傳輸函數參數的好方法是什麼？

<div id = "foo" onclick="bar(variable)"></div>

與

<div id = "foo"></div> 
$(document).ready(function() { 
    $("#foo").click(function(event) { 
     bar(???); 
    }); 
});

現在，這將是轉移參數bar()的好方法。

我應該合併它與一些元素ID？或者我應該聲明它是一個JS變量使用PHP時，我加載頁面？或者，還有更好的方法？

來源

2011-10-12 Bojack

29是什麼意思？ – jondavidjohn

'bar（29）有什麼問題;' – Joe

@IAbstractDownvoteFactory它是突兀的... – jondavidjohn

你可以把項目本身的屬性和檢索從點擊處理程序。

<div id="foo" data-item="29"></div> 

$(document).ready(function() { 
    $("#foo").click(function(event) { 
     bar($(this).data("item")); 
    }); 
});

當然，如果你只擁有其中之一，你並不需要抽象的數據數量，你可以做這樣的：

$(document).ready(function() { 
    $("#foo").click(function(event) { 
     bar(29); 
    }); 
});

不過，我想大家都假設你想讓29來自標記，所以你可以在許多元素上使用常見的點擊處理器。如果是這種情況，那麼第一種方法就可以實現這一點。

來源

2011-10-12 16:14:51 jfriend00

是的，它是html 5，但人們早在html5規範之前就已經做了這種方法。它不是有效的HTML，但它的工作原理。記住html5的規範是基於人們如何違反規則以及人們經常做什麼的。如果你希望它是有效的html，那麼將它添加到class屬性中。這是最常用的方法。 – Yamiko

你認爲這不起作用的瀏覽器是什麼？在自定義屬性前面使用「data-」的慣例是爲HTML5提供的一種慣例，以防止自定義屬性和標準屬性之間的衝突，但它在舊版瀏覽器中似乎對我來說很好。 – jfriend00

您可以在參數存儲作爲數據屬性：

<div id="foo" data-bar="29"></div>

$(document).ready(function() { 
    $("#foo").click(function(event) { 
     bar($(this).data('bar')); 
    }); 
});

來源

2011-10-12 16:14:16 josh3736

***注意***這是一個html5規範，需要現代瀏覽器... – jondavidjohn

它是一個html5規範，但現代瀏覽器不是必需的... – Rafay

簡單 - 如果你要使用PHP變量：

<div id="foo"></div> 
$(document).ready(function() { 
    $("#foo").click(function(event) { 
     bar(<?= $variable ?>); 
    }); 
});

來源

2011-10-12 16:16:35 jbyrd

我建議的數據屬性的其他建議。這是不正確的HTML，但它適用於今天使用的所有瀏覽器...
喜歡寫入有效代碼（不是我在這種情況下）的人喜歡將數據添加到類屬性或將它只設置在JavaScript 。

來源

2011-10-12 16:23:36 Yamiko

大多數人認爲他們需要參數來定位元素，該元素是被點擊的元素的子元素或具有已知路徑的元素。對於這種事情，最好的做法是根本不使用參數，而是從被點擊的節點遍歷DOM以找到適當的元素。

$("#foo").click(function(event) { 
    var doSomethingTo = $(this).find('div')[0]; 
    doSomethingTo.hide(); 
});

來源

2011-10-12 17:40:09 James

使用選擇器時傳輸函數參數的好方法是什麼？

回答

相關問題