jquery 頁面加載 function

Question

我試圖讓頁面加載工作，但不是為每個按鈕制作 js，我希望它通過ul到 go 並從每個li獲取值

 $(function() { $("#nav").children().each($(this).on("click", function() { $("#main").load("/pages/" + $(this).data("page") + ".php"); })); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul id="nav"> <li data-page="home" id="a">Home</li> <li data-page="page-2" id="b">Page 2</li> <li data-page="page-3" id="c">Page 3</li> </ul> </nav>

我得到的錯誤是這個

Uncaught TypeError: t.call is not a function
at Function.each (jquery-3.4.1.min.js:2)
at k.fn.init.each (jquery-3.4.1.min.js:2)
at HTMLDocument.<anonymous> (page-load.js:17)
at e (jquery-3.4.1.min.js:2)
at t (jquery-3.4.1.min.js:2)

Answer 1

$("#nav").children().each($(this).on("click", function () {是錯誤的-我可以看到您的意圖，但是

a）“.each”期望回調 function 作為輸入，而不是 jQuery 集合（因此出現錯誤消息），並且

b）無論如何都沒有必要為此使用循環。

整行可以簡化為$("#nav li").click( function () { . jQuery 將確保每個列表項都附加一個單獨的單擊處理程序。

演示：

 $(function() { $("#nav li").click(function() { console.log($(this).data("page")); $("#main").load("/pages/" + $(this).data("page") + ".php"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul id="nav"> <li data-page="home" id="a">Home</li> <li data-page="page-2" id="b">Page 2</li> <li data-page="page-3" id="c">Page 3</li> </ul> </nav>