JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<ul>
    <li><img src="http://files.sharenator.com/grumpy_cat_Grumpy_Cats-s492x305-51794-580.jpg" />na</li>
    <li><img src="http://sleepycathollow.files.wordpress.com/2010/09/funny-pictures-cat-is-grumpy.jpg?w=500&h=374" />ma</li>
    <li><img src="http://www.adoptapetfenton.com/userfiles/grumpy%20cat.jpg" />ba</li>
<ul>
    
<br /><br />

<input type="text" id="test" />
    
<br /><br />
Type the text in the boxes into the input, and see them change.

CSS

li {position: relative; height: 100px; width: 160px; display: inline-block; background: red; text-align: center; vertical-align: middle; margin: 20px;}

img {height: 100px; width: 160px;}

JavaScript

var text = ['na', 'ma', 'ba'];

var happy = ['http://1.bp.blogspot.com/_QQ6fUQG95io/TUYo-3Crs-I/AAAAAAAAAAM/o9kvQGaaKps/s1600/675_smiling+cat.gif',
             'http://www.all4humor.com/images/files/Cat%20Smiling%20Huge.jpg',
             'http://img.photobucket.com/albums/v607/yrduckie/Emoticons/CatKittySmiley-1.jpg'
            ];

var grumpy = $('img').map(function(){ return this.src; }).get(); //gets the original images from the HTML

$("#test").on('keyup', function() {
    var typed = this.value;
    $.each(text, function(index, item) {
        if (typed.indexOf(item)!=-1) {
            $('li', 'ul').eq(index).find('img').attr('src', happy[index]);
        }else{
            $('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
        }
    });
});