How to port an image by selecting a part of the name?

Question

Hope you can help me solve my problem.

These two images are connected somewhere on the site.

<a href="?FRUIT=banana><img height="40" src="../../banana.jpg?format=raw" title="Banana - yellow"></a>

<a href="?FRUIT=apple><img height="40" src="../../apple.jpg?format=raw" title="Apple - green"></a>

I want to omit them to start recording a function.

As you can see, the title of each image contains fruit and color that should be connected while listening to the fruit.

I started to create an array.

var colors = ['yellow','green'];

Each element of the array should be marked in green 3px.

for(var i = 0;i < colors.length;i++){
.css('border','3px dotted green');
}

But how do I get the title of an image containing a color to lower it with green with a resolution of 3 pixels?

Thanks in advance.

Answer 1

for(var i = 0;i < fruits.length;i++){
 $('img[title$='+fruits[i]+']').css('border','3px dotted green');
 var title =  $('#'+fruits[i]).attr('title');
}

here is how you can get the title and cover all the images whose names end with any color in the fruit array.

Answer 2

, , .

var fruit_colors = {Banana: "yellow", Apple: "red", Lime: "green", Grape: "purple"};
for(k in fruit_colors){
  $("img[title^=" + k).css("border","3px dotted " + fruit_color[k])
}