JSFiddle - React, Tailwind, and code Playground

by rwaldron

JavaScript

var elem;

// getting -> setting
elem = $("<div data-a='1'/>");
assert(elem.data("a"), 1, "data should be read properly");

elem.data("a", 2);
assert(elem.data("a"), 2, "data should be changed");
assert(elem.attr("data-a"), 1, "attr should not be changed");

// setting -> getting
elem = $("<div data-a='1'/>");
elem.data("a", 2);
assert(elem.data("a"), 2, "data should be changed");
assert(elem.attr("data-a"), 1, "attr should not be changed");

// getting -> removing
elem = $("<div data-a='1'/>");
assert(elem.data("a"), 1, "data should be read properly");

elem.removeData("a");
assert(elem.data("a"), null, "data should be removed");
assert(elem.attr("data-a"), 1, "attr should not be changed");

// setting -> removing
elem = $("<div data-a='1'/>");
elem.data("a", 2);

elem.removeData("a");
assert(elem.data("a"), null, "data should be removed");
assert(elem.attr("data-a"), 1, "attr should not be changed");

// removing - > getting
elem = $("<div data-a='1'/>");
elem.removeData("a");
assert(elem.data("a"), null, "data should be removed");
assert(elem.attr("data-a"), 1, "attr should not be changed");

// removing - > setting
elem = $("<div data-a='1'/>");
elem.removeData("a");

elem.data("a", 2);
assert(elem.data("a"), 2, "data should be changed");
assert(elem.attr("data-a"), 1, "attr should not be changed");


function assert(actual, expected, message) {
    var result = actual == expected;
    var status = result ? 'OK' : 'FAIL (expected: ' + expected + ', got: ' + actual + ')';
    $('body').append(message + ', ' + status + '<br/>');
}