Question

我有一个span，用于在价格输入框的开头显示货币符号，该符号根据下拉框中选择的货币而变化。这些工作通过使用notEmpty()事件调用onChange来完成。

我的代码是：

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

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

我必须添加 才能在价格文本框中正确对齐符号。

这完全有效，直到我做了两处更改，我不再使用实际货币符号（£，$，€）作为值，因为MySQL不喜欢£符号，我现在使用GBP，USD和EUR。第二个更改是每行，我加载一个包含currencysel下拉列表和currencysym范围的表单。现在解决此问题很简单，我可以将行ID附加到currencysel和currencysym ID的末尾，因此示例行可能包含currencysel6和currencysym6，但是尽管最后有数字，我如何让JavaScript仍能识别这些？

对于第一期，我试过：

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

但这不起作用。

第二个问题我没有一个线索，这是我希望得到你帮助的地方。

小提琴：http://jsfiddle.net/66co5kfo/

Answer 1

您可以做的是按类名而不是ID访问元素。您只需要在所有相关select元素上提供公共类名，以便您可以访问它们。（并对相应的span元素执行相同的操作。

然后，您可以使用.getElementById()和.querySelector()以及.querySelectorAll()来代替".className"来获取具有＆＃34; className＆的类的元素＃34;。）

查看下面的示例代码，了解如何在不知道ID的情况下访问和附加多个不同元素的事件。

＆＃13;

// 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;
  }
  
}

＆＃13;

<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>

＆＃13;

正如我在代码注释中提到的，以下模式用于创建一个立即执行的函数表达式（IIFE），这是一个高级但方便的JavaScript概念。

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

这在循环中非常有用，因为您可以将参数传递给函数表达式以获取变量值的快照，然后您可以将其传递给其他函数（可能不会立即执行，如事件处理程序的情况）根据需要。

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

Answer 2

我为您的解决方案创建了一个plunker。此代码不需要任何其他Javascript库，但需要引导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/

如何调整我的JavaScript以使用多行和不同的值？

3 个答案: