如何用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插件选项

回答

相关问题