在jquery的$ .extend中包括“-”

Question

我正在嘗試創建簡單的Jquery插件。 問題是，當我將設置的屬性名稱從backgroundcolor1更改為background-color1或僅在屬性名稱中包含“-”時，編譯器不允許我這樣做。

這是為什么？

  (function ( $ ) { $.fn.greenify = function( options ) { // This is the easiest way to have default options. var settings = $.extend({ // These are the defaults. color: "#556b2f", backgroundcolor1: "white" }, options ); // Greenify the collection based on the settings variable. return this.css({ "color": settings.color, "background-color": settings.backgroundcolor1 }); }; }( jQuery )); $(document).ready(function () { $("h2").greenify({ color:"red",backgroundcolor1:"yellow"}); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2> for test</h2> 

我已經添加了代碼，您可以嘗試使用background-color1代替backgroundcolor1，並且您會看到編譯器不允許這樣做。

Answer 1

您可以使用帶引號的對象鍵：

$.fn.greenify = function (options) {
    var settings = $.extend({
        "color": "#556b2f",
        "background-color": "white"
    }, options);

    return this.css({
        "color": settings["color"],
        "background-color": settings["background-color"]
    });
}

$("h2").greenify({ "color": "red", "background-color": "yellow" });

Answer 2

“-”符號在JavaScript中用作減號運算符，因此將嘗試嘗試計算變量。 不能在變量命名中使用。