JavaScript布爾真正變成假，假不變真

Question

這看起來非常微不足道，但我不知道它爲什麼不工作。

我正在使用div而不是我的web應用程序的複選框。我正在使用名爲「contentEditable」的JavaScript功能將布爾屬性設置爲HTML div元素。

下面是切換屬性true或false代碼：

$(document).on('click', '.chartPageSensorBox', function() { 
    var chartNumber = this.id.charAt(6), 
     visibilityIndex = this.id.charAt(9), 
     checkBoxToggle = this.id.contentEditable; 

    //the alert below returns default value, output is: 'true true' 
    alert(this.id.contentEditable + " " + checkBoxToggle); 

    checkBoxToggle = !checkBoxToggle; 

    this.id.contentEditable = checkBoxToggle; 

    //the alert output now is: 'false false' 
    alert(this.id.contentEditable + " " + checkBoxToggle); 

    //The series for the chart successfully turns off because it is false 
    allCharts[chartNumber - 1].dyGraph.setVisibility(visibilityIndex, checkBoxToggle); 
}); 

現在的問題是，當我再次點擊股利，虛假仍假永不變回真，我不理解爲什麼自if語句應該將checkBoxToggle變爲true。編輯＃1：清理代碼，但沒有修復錯誤只是爲了讓未來的讀者更清晰。

編輯＃2：請參閱下面的代碼。核心問題仍然存在......

$(document).on('click', '.chartPageSensorBox', function() { 
    var chartNumber = this.id.charAt(6), 
     visibilityIndex = this.id.charAt(9), 
     checkBoxToggle = $(this).prop("contentEditable"); 

    alert(checkBoxToggle); 
    checkBoxToggle = !checkBoxToggle; 
    alert(checkBoxToggle); 

    //After the alerts, true becomes false, but false remains false indefinitely. 

    $(this).prop("contentEditable", checkBoxToggle); 

    allCharts[chartNumber - 1].dyGraph.setVisibility(visibilityIndex, checkBoxToggle); 
}); 

Answer 1

幾件事情。

1. 使用this而不是document.getElementById(this.id)。

2. 使用.isContentEditable代替.contentEditable，同時檢查它是否具有該屬性。

   alert(this.isContentEditable + " " + checkBoxToggle); 
   

3. 此外，你需要設置使用"true"而不是true的contentEditable財產。不知道爲什麼。所以試試！

最後，改變如下：

if (checkBoxToggle) { 
    checkBoxToggle = false; 
} else { 
    checkBoxToggle = true; 
} 

要：

checkBoxToggle = !checkBoxToggle; 

在簡單的方法，因爲使用的是jQuery，你可以使用：

$(this).prop("contenteditable");  // Getter 
$(this).prop("contenteditable", true); // Set to true 
$(this).prop("contenteditable", false); // Set to false