Question

我有一个问题。例如，公交车票价格。如果它来自

A至B，价格为300
B至C = 400
C至D = 200
D至A = 600

它是单向的（A到B到C到D到A等等，它存储在两个选择框中

因此，1st选择框用于来源，2nd用于目的地。

如果我为第一个选择框选择A而第二个选择C，则应该向我收取费用700（300 + 400）。如果我从D转到C，则应向我收取费用1300（600 + 300 + 400）。如何用Javascript编写？这看起来很简单，但让我感到困惑。

以下是示例代码，但它只是从两个选择框中添加值。我想要的是添加具有单向流的值。例如，如果我从D转到B，则结果应为900。感谢

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
    display: inline;
}
</style>
</head>
<body>
<p>From :</p>
<select name= "from">
   <option value="2000">A</option>
   <option value="5000">B</option>
   <option value="3000">C</option>
   <option value="10000">D</option>
</select>
<p>To :</p>
<select name= "to">
   <option value="2000">A</option>
   <option value="5000">B</option>
   <option value="3000">C</option>
   <option value="10000">D</option>
</select>
<button type="button" onclick="output();">Calculate</button><br>
<p id="result"></p>
<script type="text/javascript">
var result = document.getElementById('result');
function output(){
    var sour = document.getElementsByName("from")[0].value;
    var dest = document.getElementsByName("to")[0].value;
    var price = 0;
    var x;
    for (x = 0; x < 4; x++) {
        if (sour[x] != dest[x]){
            price += parseInt(sour) + parseInt(dest);
            result.innerHTML = price;
            console.log (price);
        }

    }
} 
</script>
</body>
</html>

Answer 1

保持您的数据和您的表示形式分离始终是一个好主意（有完整的框架）。

在您的情况下，数据的分离将从<option value="val">到javascript的价格作为保存不同区域的价格值的数据对象。

然后，您可以浏览此数据对象并创建总和

有关可能的实施，请参阅this fiddle。

如果有任何不清楚的地方，请随时在评论中提出

Answer 2

我能想到的最简单的解决方案是在数组中设置标签/值对并进行处理：

var arr = [{
  label: 'A',
  val: 2000
}, {
  label: 'B',
  val: 5000
}, {
  label: 'C',
  val: 3000
}, {
  label: 'D',
  val: 10000
}, ];


function output() {
  var sour = document.getElementsByName("from")[0].value;
  var dest = document.getElementsByName("to")[0].value;

  var res = arr.reduce(function(ac, x) {
      //first you filter the objects in between sout and dest
      if (x.label.charCodeAt() >= sour.charCodeAt() && x.label.charCodeAt() <= dest.charCodeAt())
      return ac += x.val;
      //else
      return ac;
    }, 0)
  result.innerHTML = res;
  console.log("res", res)

}

这个过程依赖于array.reduce，如果你是JS的新手，这是一个非常重要的数组处理方法。

fiddle

Answer 3

@Aides的答案是正确的，但它使用了一些JS魔法，这在尝试理解代码时可能不是最好的。

看看这个小提琴：https://jsfiddle.net/gxxpjy6j/

代码使用类似数据结构的图形，但可以轻松调整以使用完整的图形。代码也很容易理解。

<强> HTML ：

<body>
<p>From :</p>
<select name= "from">
   <option value="A">A</option>
   <option value="B">B</option>
   <option value="C">C</option>
   <option value="D">D</option>
</select>
<p>To :</p>
<select name= "to">
   <option value="A">A</option>
   <option value="B">B</option>
   <option value="C">C</option>
   <option value="D">D</option>
</select>
<button type="button" onclick="output();">Calculate</button><br>
<p id="result"></p>
</body>

<强>的Javascript

var result = document.getElementById('result');
output = function output(){
    var src = document.getElementsByName("from")[0].value;
    var dst = document.getElementsByName("to")[0].value;
    var curr = src;
    var price = 0;
    var x;

    var adjList = {
        'A': ['B', 2000],
      'B': ['C', 5000],
      'C': ['D', 3000],
      'D': ['A', 10000],
    }

    while (curr != dst) {
        price += adjList[curr][1];
      curr = adjList[curr][0];
    }

    result.innerHTML = price;
}

希望这有帮助，即使不是选定的答案。

从两个选择框添加值

3 个答案: