JSFiddle - React, Tailwind, and code Playground

by jhoguet

HTML

<div id="full" data-name="Full Hoguet", data-age="1"></div>
<div id="partial" data-name="Partial Hoguet"></div>
<div id="none"></div>
<p id="options" data-name="Options Hoguet", data-age="2"></p>
<div id="complex" data-complex='{"adjective" : "really cool"}', data-age="2"></div>

JavaScript

$.fn.testDataAndDefaults = function(options) {
    this.each(function() {
        var $this = $(this);
        var settings = $.extend(true, {}, $.fn.testDataAndDefaults.defaults, $this.data(), options);
        $this.append('<p>' + settings.complex.adjective + ' Name: ' + settings.name + '</p>');
        $this.append('<p>Age: ' + settings.age + '</p>');
    });
};
$.fn.testDataAndDefaults.defaults = {
    name: 'Guest',
    age: 0,
    complex: {
        adjective: 'cool'
    }
};
$('div').testDataAndDefaults();

$('#options').testDataAndDefaults({age: 100});