Блог

Я пытаюсь создать значение в долларах (в виде изображений) для публикации на html-странице. Под этим я подразумеваю, что если значение равно 15.25, то на странице мне нужно иметь div с изображением [1], [5], [.], [2], и [5].

Я попытался взять каждую цифру по отдельности, найти ее значение (и правильное изображение) и добавить его к имеющемуся у меня пустому div. Вот как я к этому подходил:

 //Get each digit and find the correct number image for it
for (var x = 0; x < valueLength; x  ) {
    //Gets the current digit
    tempDigit = value.toString().charAt(x);

    //Find out what the digit is
    switch (tempDigit) {
        case "0":
            //Gets image
            img.src = "Images/Temp/0.png";
            //Append image to end of div
            document.getElementById(valueDiv).appendChild(img);
            break;
        case "1":
            //Gets image
            img.src = "Images/Temp/1.png";
            //Append image to end of div
            document.getElementById(valueDiv).appendChild(img);
            break;
        case "2":
            //Gets image
            img.src = "Images/Temp/2.png";
            //Append image to end of div
            document.getElementById(valueDiv).appendChild(img);
            break;
  

Это продолжается до тех пор, пока регистр «.» (десятичная точка) и valueDiv = 'valueDiv' на моей html-странице. На данный момент я получаю все правильные значения, но видно только последнее изображение (в случае 15.25 я увижу 5)

Есть ли способ не перезаписывать предыдущее добавление, используя этот метод, или лучший способ сделать это?

В настоящее время вы каждый раз ссылаетесь на один и тот же элемент изображения. Вы должны каждый раз создавать новый элемент изображения с помощью цикла for:

 img = document.createElement("img");
  

Вместо того, чтобы создавать изображения и добавлять их, не могли бы вы вместо этого записать код в строку? Вы бы добавили строку типа <img src="Images/Temp/1.png" alt="1" /> in к другой строке, а затем вставили завершенную строку в значение innerHTML контейнера div.

Вероятно, есть и более простой способ сделать это — вместо длинной инструкции case замените десятичную точку строкой на «d». Назовите свой набор изображений 0.png, 1.png, 2.png (и т.д.) так, как у вас уже есть. Включите «d.png» для вашей десятичной точки в этот набор. Затем выполните цикл по строковому значению, но вместо переключателя / регистра создайте строковое значение из текущего символа. Это работает для вашего текущего метода создания изображения или для вывода строки:

 value.replace(".", "d")
//replace the decimal point with a letter d

text = '';
for (var x = 0; x < valueLength; x  ) {
    //Gets the current digit
    tempDigit = value.toString().charAt(x);

    text = text   '<img src="Images/Temp/'   tempDigit   '.png" alt="'   value   '" />';
    //or, if you prefer, do: img.src = "Images/Temp/'   tempDigit   '.png";
}
  

Переключение / регистр не требуется. В качестве бонуса я устанавливаю для текста alt каждого символьного изображения значение full, поэтому при наведении курсора мыши на любую часть изображения вы получаете всплывающую подсказку для строки с полным значением.

Что-то вроде этого: http://jsbin.com/orene3/2/edit ?

Несколько улучшений: добавляйте к документу только один раз; используйте фрагмент документа для создания временного держателя; используйте спрайт вместо отдельных изображений; и введите текст внутри span , а затем текстовый отступ, чтобы убрать их с экрана (для доступности).