Как адаптировать мой JavaScript для работы с несколькими строками и разными значениями?

Question

У меня есть span, который работает для отображения символа валюты в начале поля ввода цены, который изменяется в зависимости от того, какая валюта выбрана в раскрывающемся списке. Они работают по телефону notEmpty() с событием onChange.

Мой код был:

function notEmpty(){ 
    var e = document.getElementById("currencysel"); 
    var strUser = e.options[e.selectedIndex].value; 
    var strUser2 = " " + strUser; 
    document.getElementById('currencysym').innerHTML = strUser2; 
} 

notEmpty() 
document.getElementById("currencysel").onchange = notEmpty; 

мне пришлось добавить   правильно выровнять символ в текстовом поле цены.

Это отлично работало, пока я не сделал два изменения: я больше не использую символ валюты (£, $, €) в качестве значения, потому что MySQL не нравится символ £, теперь я использую GBP, USD и EUR. Второе изменение относится к каждой строке, я загружаю форму, которая включает в себя как выпадающий список currencysel, так и диапазон currencysym. Теперь исправление этого легко, я могу просто добавить идентификатор строки в конец идентификаторов currencysel и currencysym, поэтому строка примера может иметь currencysel6 и currencysym6, но как я могу получить JavaScript, чтобы все еще распознавать их, несмотря на цифры на конце ?

Для первого вопроса, я попробовал:

function notEmpty(){ 
    var e = document.getElementById('currencysel'); 
    var strUser = e.options[e.selectedIndex].value; 
    if (strUser = 'GBP'){ 
     strUser2 = ' £' 
    } else if (strUser = "USD"){ 
     strUser2 = ' $' 
    } else if (strUser = "EUR"){ 
     strUser2 = ' €' 
    } 
    document.getElementById('currencysym').innerHTML = strUser2; 
} 

Но это не сработало.

Вторая проблема: у меня не было ни единой подсказки, в которой я надеюсь получить вашу помощь.

Fiddle: http://jsfiddle.net/66co5kfo/

Answer 1

Что вы можете сделать, это получить доступ к элементам по имени класса, а не по ID. Вам просто нужно предоставить общее имя класса для всех соответствующих элементов select, чтобы вы могли получить к ним доступ. (И делать то же самое для соответствующих span элементов.

Тогда вместо .getElementById() вы можете использовать .querySelector() и .querySelectorAll() вместе с CSS селекторов (например, ".className", чтобы получить элемент с классом «Classname»).

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

// get all the containing elements by classname 
 
var pickers = document.querySelectorAll(".currencyPicker"); 
 

 
// loop through all those containers 
 
var i = pickers.length; 
 
while (i--) { 
 
    // this is an immediately executing function expresion which creates a closure 
 
    // the closure allows the event listener to access the span and select elements 
 
    (function(span, select) { 
 
    // attach the change event to the select element 
 
    select.addEventListener("change", function() { 
 
     notEmpty(span, select); 
 
    }); 
 
    })(pickers[i].querySelector(".currencysym"), pickers[i].querySelector(".currencysel")); 
 
} 
 

 
function notEmpty(spanToUpdate, select) { 
 
    switch(select.value){ 
 
     case "USD": 
 
     spanToUpdate.innerHTML = "$"; 
 
     break; 
 
     case "GBP": 
 
     spanToUpdate.innerHTML = "£"; 
 
     break; 
 
     case "EUR": 
 
     spanToUpdate.innerHTML = "€"; 
 
     break; 
 
    } 
 
    
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <div class="currencyPicker"> 
 
     <select class="currencysel"> 
 
      <options> 
 
      <option value="USD">$</option> 
 
      <option value="GBP">£</option> 
 
      <option value="EUR">€</option> 
 
      </options> 
 
     </select> 
 
     <span class="currencysym">$</span> 
 
     <input type="text" /> 
 
     </div> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     <div class="currencyPicker"> 
 
     <select class="currencysel"> 
 
      <options> 
 
      <option value="USD">$</option> 
 
      <option value="GBP">£</option> 
 
      <option value="EUR">€</option> 
 
      </options> 
 
     </select> 
 
     <span class="currencysym">$</span> 
 
     <input type="text" /> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="currencyPicker"> 
 
     <select class="currencysel"> 
 
      <options> 
 
      <option value="USD">$</option> 
 
      <option value="GBP">£</option> 
 
      <option value="EUR">€</option> 
 
      </options> 
 
     </select> 
 
     <span class="currencysym">$</span> 
 
     <input type="text" /> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Как я уже упоминал в комментариях к коду, для создания выражения функции выполнения (IIFE), которое представляет собой расширенную, но удобную концепцию JavaScript, используется следующий шаблон.

(function(){ 
    // code 
})(); 

Это полезно в цикле, потому что вы можете передать параметры в выражение функции, чтобы получить снимки значений переменных, которые затем можно перейти на другие функции (которые не могут выполнять сразу же, как и в случае обработчиков событий) по мере необходимости.

originalVariable = arr[i]; 
(function(copiedVariable){ 
    // code that uses copiedVariable 
})(originalVariable); 

Answer 2

Я создал плункер для вашего решения. Этот код не требует каких-либо дополнительных библиотек Javascript, но требует bootstrap CSS. Это также можно сделать с помощью обычного текста, если вы не хотите использовать CSS.

http://plnkr.co/edit/V0GDRY?p=preview

HTML

<form class="form-inline"> 
    <div class="form-group"> 
    <label class="form-label">Select a currency</label> 
    <select class="form-control" id="currencyDropdown"> 
     <option value="glyphicon-gbp">£</option> 
     <option value="glyphicon-usd">$</option> 
     <option value="glpyhicon-euro">€</option> 
    </select> 
    </div> 
    <div class="form-group"> 
    <label class="form-label">Enter a Price</label> 
    <div class="input-group"> 
     <div class="input-group-addon glyphicon glyphicon-gbp" id="currencySymbol"></div> 
     <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> 
    </div> 
    </div> 
    <button type="submit" class="btn btn-primary">Submit Price</button> 
</form> 

JS

function changeCurrencyType (symbolClass) { 
    var symbol = document.getElementById('currencySymbol'); 

    symbol.className = 'input-group-addon glyphicon ' + symbolClass; 
} 

(function() { 
    var currencyDropdown = document.getElementById('currencyDropdown'); 

    currencyDropdown.addEventListener('change', function() { 
    var symbolClass = currencyDropdown.options[currencyDropdown.selectedIndex].value; 

    changeCurrencyType(symbolClass); 
    }, false); 
})(); 

Answer 3

Я думаю, что ваша единственная проблема заключается в: if (strUser = 'GBP'), это должно быть: if (strUser == 'GBP') (необходимо использовать двойные == равных)

http://jsfiddle.net/ewLsoyvh/