JSFiddle - React, Tailwind, and code Playground

by Aakash Chakravarthy

HTML

<div class="qwerty">
<input type="text" data-condition="aaa;aakash?hide:slideDown" data-target="(closest::.qwerty)(find::.vv)||(closest::.qwerty)(find::.as)" />
<div class="qqq">hey</div>

<ul>
    <li class="as" data-index="2">sdsad</li>
    <li class='qq'>qqq</li>
    <li class="vv" >hey</li>
</ul>
    
</div>

JavaScript

$(document).ready(function(){
    $('[data-condition]').on( 'change', function(){
        
        cond = $(this).data('condition');
        target= $(this).data('target');
        $targetEle = $(this);
        
        $.each( target.split( '||' ), function( index, iTarget ){
            if( iTarget.indexOf( '(' ) != -1 ){ // Target selection is advanced, it has colon
                console.log( iTarget );
                $.each( iTarget.match( /\(.+?\)/g ), function( index, method ){
                    console.log( method );
                    method = method.replace( /[()]/g, '' );
                    methodSplit = method.split( '::' );
                    console.log( methodSplit );
                    $targetEle = $targetEle[ methodSplit[0] ]( methodSplit[1] );
                });

            }else{

                target = target.replace( '!', '' );
                $targetEle = $( target );
            }
        });
        
        condSplit = cond.split( '?' );
        condExpression = condSplit[0].split( ';' );
        condAction = condSplit[1].split( ':' );
        
        if( $.inArray( $(this).val(), condExpression ) != -1 ){ // Expression true, execute true
            $targetEle[ condAction[0] ]();
        }else{
            $targetEle[ condAction[1] ]();
        }
        
    });
        
});