JSFiddle - React, Tailwind, and code Playground
HTML
<img src='#' data-src='resourceId-firefox' alt='firefox' />
<p data-src='resourceId-hello'></p><br>
<input id='username' data-src='resourceId-username'/><br>
<input type="radio" name="sex" value="male" data-src="resourceId-genderMale" />Male<br>
<input type="checkbox" name="dev" value="developer" data-src="resourceId-isDeveloper" />Developer<br>
JavaScript
$(document).ready(function(){
$("*").each(function(i, e){
if($(e).attr("data-src") && $(e).attr("data-src").indexOf("resourceId-") != -1) {
switch($(e).get(0).tagName) {
case "INPUT" :
if(!$(e).attr("type")){
$(e).val(ResourceLibrary[$(e).attr("data-src").replace("resourceId-", "")]);
return;
}
switch($(e).attr("type").toLowerCase()) {
case "radio":
case "checkbox":
$(e).attr("checked", ResourceLibrary[$(e).attr("data-src").replace("resourceId-", "")])
}
return;
case "IMG" :
$(e).attr("src", ResourceLibrary[$(e).attr("data-src").replace("resourceId-", "")]);
return;
case "P" :
$(e).html(ResourceLibrary[$(e).attr("data-src").replace("resourceId-", "")]);
return;
default:
return;
}
}
});
});
var ResourceLibrary = [];
ResourceLibrary["hello"] = "Hello World!";
ResourceLibrary["genderMale"] = true;
ResourceLibrary["username"] = "srvikram13";
ResourceLibrary["isDeveloper"] = true;
ResourceLibrary["firefox"] =...