Javascript-форум - отображение изображений

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - отображение изображений (https://javascript.ru/forum/misc/61080-otobrazhenie-izobrazhenijj.html)

отображение изображений

Доброго времени суток, каким образом можно реализовать следующий скрипт?

имеется массив с определенным значениями (отсортированный)
например:
['a', 'a', 'b', 'c']

необходимо вывести изображение на страницу в зависимости от значений элементов в массиве,
т.е. с начало надо вывести изображение который соответствует элементу "а" из массива,
если количество элементов повторяется то около изображения надо писать X2 (т.е. данное изображение в количестве 2 штуки )

если массив стал вида:

['a', 'a', 'a', 'b', 'c']
то уже вывести все изображения с учетом того что изображение под значениям массива имеет вид:
"изображение" X3

html должен выглядеть следующим образом:

<div class="my_img">
<img src="img/1.png" alt="a"> 
x2
<img src="img/2.png" alt="b"> 
...
</div>

идея: думал можно первоначально скрыть все изображение, и в зависимости от значений в массиве
отображать их, так же сделать счетчик который будет смотреть сколько повторяющих элементов
в массиве и так же выводить их, но этот метод не оптимальный. каким образом это можно реализовать? Будет не плохо если поможете написать скрип ;)

сделал следующим образом:

for (var i=0;i<Arr.length; i=i+1)
			{
				var pc = document.getElementById("my_img");
				if (Arr[i]=='a') pc.innerHTML="<img src='img/1.png' alt='a'>";
				else if (BlackArr[i]=='b') pc.innerHTML="<img src='img/2.png' alt='b'>";
				else if (BlackArr[i]=='c') pc.innerHTML="<img src='img/3.png' alt='c'>";
				else if (BlackArr[i]=='d') pc.innerHTML="<img src='img/4.png' alt='d'>";
				else if (BlackArr[i]=='e') pc.innerHTML="<img src='img/5.png' alt='e'>";
				
			}

но тогда у меня изображение выведется один раз и все. Т.е. получаю изображение 1.png хоть меня массив имеет вид ['a', 'b']. и не получается реализовать вывод количества изображение (X2)

сделал так:

var bp=0, bb=0, bn=0, br=0, bq=0;
				var Resbp='', Resbb='', Resbn='', Resbr='', Resbq='';
				for (var i=0;i<Arr.length; i=i+1)
				{
					if (Arr[i]=='a') {
						bp=bp+1;
						Resbp="<img src='img/1.png' alt='a'>X" + bp;
						} else if (Arr[i]=='b') {
							bb=bb+1;
							Resbb="<img src='img/2.png' alt='b'>X"+bb;
						} else if (Arr[i]=='c') {
							bn=bn+1;
							Resbn="<img src='img/3.png' alt='c'>X"+bn;
						} else if (Arr[i]=='d') {
							br=br+1;
							Resbr="<img src='img/4.png' alt='d>X"+br;
						} else if (Arr[i]=='e') {
							Resbq="<img src='img/5.png' alt='e'>"
						}
				}
				
				var pc = document.getElementById("my_img");
				pc.innerHTML=Resbp+Resbb+Resbn+Resbr+Resbq;

работает как надо, но скрипт не красивый, и не оптимальный, помогите изменить

Узнать количество одинаковых символов в отсортированном массиве можно так

<script>
		var arr = ['a','a','a','b','b','c']
		var obj = new Object();
		var index,elem,lastIndex,length
		while (arr.length != 0){
			index = 0;
			elem = arr[index];
			lastIndex = arr.lastIndexOf(elem);
			length = lastIndex - index + 1
			arr.splice(index, length);	
			obj[elem] = length;
		}
		
		for (var prop in obj)
		{
			document.write(prop + " : " + obj[prop] + "<br>");	
		}
		
	</script>

diga,
А почему у вас массив а, в, с... а не 1, 2, 3... - или, еще лучше, имена файлов?
А для создания элементов можно воспользоваться document.createElement(тип)
см. http://javascript.ru/tutorial/DOM/modify

может использовать оператор += ?

for (var i=0;i<Arr.length; i=i+1)
            {
                var pc = document.getElementById("my_img");
                if (Arr[i]=='a') pc.innerHTML+="<img src='img/1.png' alt='a'>";
                else if (BlackArr[i]=='b') pc.innerHTML+="<img src='img/2.png' alt='b'>";
                else if (BlackArr[i]=='c') pc.innerHTML+="<img src='img/3.png' alt='c'>";
                else if (BlackArr[i]=='d') pc.innerHTML+="<img src='img/4.png' alt='d'>";
                else if (BlackArr[i]=='e') pc.innerHTML+="<img src='img/5.png' alt='e'>";

Цитата:

Сообщение от Dilettante_Pro (Сообщение 406227)

на самом деле у меня имена файлов, просто я так написал для примера

Цитата:

Сообщение от EmperioAf

может использовать оператор += ?

тогда я не смогу использовать повторение элементов и в результате получу:
"изображение 1"
"изображение 1"
"изображение 2"
....
а в моем случае надо:
"изображение 1""X2"
"изображение 2""X1"

var imagesHTML = {
        a: "<img src='img/1.png' alt='a'>",
        b: "<img src='img/2.png' alt='b'>",
        c: "<img src='img/3.png' alt='c'>"
    };

    var forDraw = ['a', 'a', 'a', 'b', 'b', 'c'];
    var data = forDraw.reduce(function (result, imageKey) {
        if (!result[imageKey]) {
            result[imageKey] = {html: imagesHTML[imageKey], count: 1};
        } else {
            result[imageKey].count++;
        }
        return result;
    }, {});

    var html = '';

    Object.keys(data).forEach(function (key) {
        html += data[key].html;
        if (data[key].count > 1) {
            html += 'X' + data[key].count;
        }
        html += '\n';
    });

    alert(html);

diga,

<div class="my_img"></div>

<script>
function fn(d) {
    var b = 1,
        e = 1,
        a = "",
        c = document.querySelector(".my_img");
    d.forEach(function(f, c) {
        f != d[++c] ? (a += "<img src='img/" + e + ".png' alt='" + f + "'>", e++, a += "<br>X" + b + "<br>", b = 1) : b++
    });
    c.insertAdjacentHTML("beforeBegin", a)
};
 var arr = ['a','a','a','b','b','c'] ;
 fn(arr)
</script>