JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<div id="container">
    <h1>Example of jQuery.dataDisplay.js...</h1>
    <h2>1. Conditionally display & style an element</h2>
    <h3>(based on an input form and conditions defined in markup)</h3>
    <b>Select "yes":</b>
    <label for="yes">
        <input type="radio" name="radioTest" value="yes" id="yes" checked> Yes</label>
    <label for="no">
        <input type="radio" name="radioTest" value="no" id="no"> No</label>
    <b>Type "testing":</b>
    <input name="inputTest" type="value"/>
    <div class="dataDisplay" 
        data-display="
            {radioTest} is equal to 'yes' && (length({inputTest}) is less than or equal to 6); ||
            {radioTest} is equal to 'yes' && ({inputTest} is equal to 'testing' || {inputTest} is equal to 'testinggg'); ||
            {inputTest} is equal to 'testing' || {inputTest}=='testinggg' :: 
                $this.css('background','black'); ||
            {inputTest} is equal to 'testing' :: 
                $this.css('color','white');
                $this.css('font-size','20px');
                $this.css('border','1px solid #fff'); ||
            {inputTest} is equal to 'testinggg' :: 
                $this.css('color','yellow');
                $this.css('border','1px solid yellow');" 
        data-display-resets="
            $this.css('color', 'black');
            $this.css('display', 'none');
            $this.css('font-size', '16px');
            $this.css('background', '#fff');
            $this.css('border', '1px solid #000');">
        <a>type 'testing' or 'testinggg' in the field above</a>
        <a>(box will hide when length > 6 when value !== testing or testinggg)</a>
    </div>
    <div class="dataDisplay" 
        data-display="
            {radioTest} == 'no';" 
        data-display-resets="
            $this.css('display', 'none');">
        <a>select the 'yes' radio field above</a>
    </div>
</div>

CSS

h2 {
    margin: 0px;
}

h3 {
    margin: 5px 25px;
    font-size: 16px;
    font-weight: strong;
    display: block;
}

b {
    padding: 20px 10px 20px;
    display: inline-block;
}

label {
    margin: 5px 20px;
    display: block;
}

a {
    display: block;
}
.dataDisplay {
    margin: 0px 10px;
    padding: 10px 10px;
    font-size: 16px;
    background: #fff;
    border: 1px solid #000;
    display: none;
}

JavaScript

/*! 
 * Script: jQuery.dataDisplay.js 
 * Description: jquery.dataDisplay aids the developer in writing concise conditions against elements within a form based setting, in order to control the display of elements based on the state of a form.  
 * Copyright: Copyright (c) 2014-2017 Graham Dixon - http://gdixon.co.uk/  
 * Author: GDixon  
 * Email: [email protected]  
 * Licensed: MIT 
 * Requires: jQuery > 1.9 
 * Version: 0.0.1 
 */
!function(factory) {
    "function" == typeof define && define.amd ? define([ "jquery" ], factory) : factory(jQuery);
}(function($) {
    var defaults = {
        eventName: ".dataDisplay",
        dataAttr: "dataDisplay",
        condsAttr: "data-display",
        resetsAttr: "data-display-resets",
        initFire: !0,
        keyEventsFire: !0
    }, funcs = {
        "!empty": {
            rgx: "\\!empty\\({([^}]+)}\\)",
            exec: function(field, ctx) {
                var str = "(";
                return $('[name*="' + field + '"]', ctx).each(function() {
                    var val = $(this).val();
                    str = "(" == str ? str + '"' + val + '" !== "" ' : str + ' && "' + val + '" !== "" ';
                }), str += ")";
            }
        },
        empty: {
            rgx: "empty\\({([^}]+)}\\)",
            exec: function(field, ctx) {
                var str = "(";
                return $('[name*="' + field + '"]', ctx).each(function() {
                    var val = $(this).val();
                    str = "(" == str ? str + '"' + val + '" == "" ' : str + ' && "' + val + '" == "" ';
                }), str += ")";
            }
        },
        length: {
            rgx: "length\\({([^}]+)}\\)",
            exec: function(field, ctx) {
                var fieldSelector = '[name*="' + field + '"]';
                if (void 0 !== $(fieldSelector + ":checked", ctx).val()) str = $(fieldSelector + ":checked", ctx).val().length; else var str = $(fieldSelector, ctx).val().length;
              ...