JSFiddle - React, Tailwind, and code Playground

by felcom

HTML

<ul id="images">
    <li><img src="bw_img1.jpg" /></li>
    <li><img src="bw_img2.jpg" /></li>
    <li><img src="bw_img3.jpg" /></li>
    <li><img src="bw_img4.jpg" /></li>
</ul>

CSS

img {
    width: 30px;
    height: 30px;
    background: #ff0000; 
}

JavaScript

$(function() {

    $("#images").find('img').bind("click", function() {
        var src = $(this).attr("src");
        // Check the beginning of the src attribute  
        var state = (src.indexOf("bw_") === 0) ? 'bw' : 'clr';
        // Modify the src attribute based upon the state var we just set
        (state === 'bw') ? src = src.replace('bw_', 'clr_') : src = src.replace('clr_', 'bw_');
        // Apply the new src attribute value  
        $(this).attr("src", src);

        // This is just for demo visibility
        $('body').append('<p>' + $(this).attr('src') + '</p>');
    });

});