HTML：無序列表排序不正確

Question

在過去的三個小時里，我一直在繞圈轉以解決此問題，這很奇怪...

我有一個動態生成的無序列表，如下所示：

var numberOfSlides = 7;

for (i = 0; i < numberOfSlides; i++) {

    main.menu.append("<li class='ui-state-disabled'>List item " + i + "</a></li>");

}

正確的渲染（全部禁用）：

List item 0
List item 1
List item 2
List item 3
List item 4
List item 5
List item 6

在代碼的后面，我調用了一個應激活指定項目的函數：

enableMenuItem(2);

---

enableMenuItem: function(slideNumber){

    console.log("slideNumber: " + slideNumber); // log outputs "slideNumber: 2"

    $("ul li").eq(slideNumber).removeClass('ui-state-disabled'); // this doesn't work

}

它對於其他值（但不是2）可以正常工作，並且我發現如果調用enableMenuItem（5），則會激活2。

奇怪的是，如果我這樣做...

$("ul li").eq(2).removeClass('ui-state-disabled');

...有用。

但這不是...

if(slideNumber === 2){
    console.log("slideNumber equals 2"); // logs "slideNumber equals 2", so the below line should execute
    $("ul li").eq(2).removeClass('ui-state-disabled'); // doesn't work
}

我瘋了還是很奇怪？

Answer 1

您在enableMenuItem方法的聲明中有錯字：

enableMenuItem: function(slideNumber){
  // Some code
}

您應該將其聲明為：

function enableMenuItem(slideNumber) {
  // Some code
}

要么

var enableMenuItem = function(slideNumber) {
  // Some code
}

Answer 2

由於main.menu項目附加到main.menu ，因此應將事件綁定到同一事物。
像這樣：

main.menu.find("> li").eq(slideNumber).removeClass('ui-state-disabled');

如果文檔中還有其他無序列表，則$("ul li")也將它們作為目標。