javascript - 如何调整我的 JavaScript 以处理多行和不同的值？

Question

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

我的代码是:

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 范围的表单。现在解决这个问题很容易，我只需将行 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 = ' £'
    } 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 元素执行相同的操作。

然后，您可以使用 .querySelector() 和 .querySelectorAll() 以及 CSS 选择器(例如".className" 获取类为“className”的元素。

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

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