возможно ли нацелить изображение только с помощью ссылки src на Jquery?

Question

Я хотел бы скрыть / показать текст при нажатии на изображения, зная, что идентификаторы изображений классов все одинаковы, и я не могу это изменить.Поэтому ниже я попытался настроить таргетинг на изображения по их ссылке src.Но это не работает: появляется только один из трех текстов, и он не исчезает, когда чокается на другом изображении.

Есть идеи, пожалуйста?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(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();
    }
});
});
</script>

<div id="cyan">cyan</div>
<div id="red">red</div>
<img class="same_class" src="cyan-color.gif" />
<img class="same_class" src="red-color.gif" />

Answer 1

Это может сделать то, что вы ищете, вам нужен только один обработчик щелчка, как вы его настроили:

$(document).ready(function(){
  $("#cyan").hide();
  $("#red").hide();

  $('img').on('click', function() {
      if ($(this).attr('src') === 'cyan-color.gif') {
        $("#cyan").show();
        $("#red").hide();
      }
      if ($(this).attr('src') === 'red-color.gif') {
        $("#red").show();
        $("#cyan").hide();
      }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cyan">cyan</div>
<div id="red">red</div>
<img class="same_class" src="cyan-color.gif" />
<img class="same_class" src="red-color.gif" />

Вот JSFiddle того же самого: https://jsfiddle.net/y67jd3b0/

Я также исправил несколько небольших синтаксических ошибок (без двоеточий вметод click, неправильные закрывающие скобки) и сделал его немного более читабельным.