title: is it possible to target an image only with his src link with Jquery?
body: <p>I would like to hide / show text when clicking on images, knowing that the class images id are all the same, and I can't change this.
  So I tried below to target the images by their link src.
  But it doesn't work : only one of the three text appear, and he didn't disappear when clinking on the other image.</p>
  
  <p>Any ideas please ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
    $("#cyan").hide();
    $("#red").hide();
  
  $('img').on({
      'click': function() {
       $(this).attr('src') === 'cyan-color.gif'
    $("#cyan").show();
    $("#red").hide();
      }
  });
  $('img').on({
      'click': function() {
       $(this).attr('src') === 'red-color.gif'
    $("#red").show();
    $("#cyan").hide();
      }
  });
  });
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="cyan"&gt;cyan&lt;/div&gt;
  &lt;div id="red"&gt;red&lt;/div&gt;
  &lt;img class="same_class" src="cyan-color.gif" /&gt;
  &lt;img class="same_class" src="red-color.gif" /&gt;</code></pre>
  </div>
  </div>
  </p>