如何用html5數據屬性覆蓋jquery插件選項

我想要做的就是像往常一樣將選項設置爲插件，但也要用html5數據屬性覆蓋這些選項。如何用html5數據屬性覆蓋jquery插件選項

Here I have exactly that (jsfiddle)，但有一個小問題。

的jsfiddle代碼：

(function($){ 
    $.fn.extend({ 
     test: function(options) { 

      var defaults = { 
       background: null, 
       height: null 
      }; 

      var options = $.extend(defaults, options); 

      return this.each(function() { 
        var o = options; 
        var obj = $(this); 
        var objD = obj.data(); 


        // background 
        if (!objD.background) { 
         var cBG = o.background; 
        } 
        else { 
         var cBG = objD.background; 
        } 

        // Opacity 
        if (!objD.height) { 
         var cH = o.height; 
        } 
        else { 
         var cH = objD.height; 
        } 

        obj.css({ 
         background: cBG, 
         height: cH 
        }); 

      }); 
     } 
    }); 
})(jQuery); 

$(document).ready(function() { 
    $('.test').test({ 

     background: 'red', 
     height: 400 

    }); 
});

的方法，我使用的的jsfiddle漲大碼了這麼多，即使與同樣使用的數據只是2個不同的選項。

問題是：我怎樣才能達到相同的最終結果與較少的代碼，以確定是否應該使用的數據？

下面是從的jsfiddle的代碼，確定閹羊或不使用的數據的一部分。

// objD is obj.data(); 

// background 
if (!objD.background) { 
    var cBG = o.background; 
} 
else { 
    var cBG = objD.background; 
} 

// Opacity 
if (!objD.height) { 
    var cH = o.height; 
} 
else { 
    var cH = objD.height; 
} 

obj.css({ 
    background: cBG, 
    height: cH 
});

來源

2012-03-30 Joonas

我有一種感覺，有可能是一個更好的解決辦法，但我沒能得到它工作，直到現在。

當然，我不是專家，但是這似乎工作，更縮短了代碼，因爲它的工作方式相同插件選項通常做，它只是增加了data-attribute在那裏。

Default - 最初使用default選項。
Custom - 如果設置，請使用自定義options覆蓋default s。
Data - 如果設置，則使用data來覆蓋兩者。

http://jsfiddle.net/lollero/HvbdL/5/

o = $.extend(true, {}, options, $(this).data());

Here's another jsfiddle example.

這一個切換上點擊每個盒子的寬度。中間框的數據屬性寬度值大於其他div。

作爲一個額外的例子，here's the same thing與1個更多的選項添加到混合。

來源

2012-04-10 08:17:46 Joonas

那麼，一個常見的技巧是你的任務中的雙管道「或」運算符。如果第一個值是true，第二個被忽略，因爲只有一個真正的說法是足以讓整個表達式真：

var cBG = objD.background || o.background; 
var cH = objD.height || o.height;

事實上，如果你並不需要這些變量其他地方，只需添加結果到最後聲明：

obj.css({ 
    background: (objD.background || o.background), 
    height: (objD.height || o.height) 
});

Your fiddle

Simplified example

現在，如果objD.background任何「falsey」值（例如null，undefined，false，零或空字符串），則會自動使用o.background。如果由於某種原因，你不希望出現這種情況，你應該使用三元運算符，而不是用一個適當的測試：

obj.css({ 
    background: (objD.background!=undefined) ? objD.background : o.background, 
    height: (objD.height!=undefined) ? objD.height : o.height 
});

來源

2012-03-30 18:14:38 Blazemonger

比我做得更簡單，但我有點擔心如果我將數值'0'設置爲'data-'，它似乎直接跳到'options'。同樣的事情發生，如果數據有'假'，它直接跳轉到'選項'。這意味着我無法用這些值覆蓋。 – Joonas 2012-03-30 18:27:43

如果您將'objD.background'設置爲零，那麼'！objD.background'會評估爲true，您會得到相同的結果。但我會更新我的答案來解決這個問題。 – Blazemonger 2012-03-30 18:29:19

我看到..我曾經使用過'if（objD.cBG！= null）{options} else {data}'，但是以爲使用'！'有點短，所以我不加思索地跳到這一點：） – Joonas 2012-03-30 18:33:14

一個簡單的方法是使用Mark Dalgleish的jQuery HTML5data plugin。這個插件的專業版是命名空間，所以你的配置永遠不會與其他插件的配置衝突。

來源

2014-08-01 11:31:44 wedi

如何用html5數據屬性覆蓋jquery插件選項

回答

相關問題