Javascript总价格计算

时间：2015-04-10 05:02:37

标签： javascript

我需要创建一个非常基本的函数来计算用户点击按钮时的成本。

假设有三个客户想要旅行;一旦他们点击按钮并选择人数和位置，他们就应该看到该位置的总成本。

例如，如果他们选择第二个目的地，那么三个人将是450英镑，500英镑，然后是每个550英镑，所以总数应该是1500英镑。

3 个答案:

答案 0 :(得分：0)

这样的事可能会有所帮助： 你可以看到运行这个例子...... 

function calc(){
  var tmpText = "";
  var total = 0;
  $( ".price" ).each(function( index ) {
    //strip string into num
    tmpText = $( this ).text();
    tmpText = tmpText.substr(1);;
    //add number
    total+=Number(tmpText)
    console.log( index + ": " + $( this ).text() );
  });
  $("#result").text("$"+total);
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td class='price'>$50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td class='price'>$94</td>
  </tr>
</table>
<button onclick="calc()">calculate</button>
<p id="result"></p>

请确保您正在为您的小提琴添加jquery enter image description here

答案 1 :(得分：0)

看一下下面的例子

$(document).ready(function(){
$('#flights td').on('click', function(){
     var colIndex = $(this).prevAll().length;
     var rowIndex = $(this).parent('tr').prevAll().length + 1;

    var cost = 0;
    var sign = '';
    for (var i = 0; i < rowIndex; i++)
    {
        var value = $('#flights tbody tr:eq(' + i.toString() + ') td:eq(' + (colIndex-1) + ')').html();
        sign = value.substring(0,1);
        cost += Number(value.substring(1));
    }

    $('#cost').text(sign + cost);

});
});

<table id="flights">
<thead>
    <tr>
        <th>Destination</th>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>One</th>
        <td>$400</td>
        <td>$450</td>
        <td>$500</td>
    </tr>
    <tr>
        <th>Two</th>
        <td>$450</td>
        <td>$500</td>
        <td>$550</td>
    </tr>
    <tr>
        <th>Three</th>
        <td>$500</td>
        <td>$550</td>
        <td>$600</td>
    </tr>
    <tr>
        <th>Four</th>
        <td>$550</td>
        <td>$600</td>
        <td>$650</td>
    </tr>
    <tr>
        <th>Five</th>
        <td>$600</td>
        <td>$650</td>
        <td>$700</td>
    </tr>
</tbody>
</table>

<label>Cost: </label> <label id="cost"></label>

说明：
1- $（'＃flights td'） - 这是一个jquery选择器，用于获取名为“#flights”的表中的所有td（s）你可以找到更多关于jquery selector Here的信息

2- .on（'click'，function（）{}） - 这里我将一个事件处理函数附加到一个特定的事件，即点击----你可以找到更多关于.on（）{ {3}}

3- var colIndex = $（this）.prevAll（）。length; - 这里我得到了CLICKED td的列索引----你可以找到更多关于.prevAll（）Here

的信息

4- var rowIndex = $（this）.parent（'tr'）。prevAll（）。length + 1; - 这里我得到了CLICKED td的行索引----你可以找到更多关于.parent（）Here

的信息。

5- for（var i = 0; i＆lt; rowIndex; i ++） - 这里我开始一个从0开始循环直到ROW INDEX OF THE CLICKED td ----你可以找到更多关于for循环{{3 }}

6- var value = $（'＃flights tbody tr：eq（'+ i.toString（）+'）td：eq（'+（colIndex-1）+'）'）。html（）; - 这里我根据点击td的STATIC COLUMN INDEX和循环内的ROW INDEX（ i ）获取td内的值。 ----你可以找到更多关于.html（）Here

的信息

7- value.substring（0,1）; - 我刚收到的标志可能会有所不同（$，€） 这样我就可以在成本标签中连接它。 ----你可以找到更多关于.substring（）Here

的信息

8- cost + = Number（value.substring（1））; - 在这里，我获得每个td的价值并剥离标志并将其转换为数字，并将其添加到将在成本标签中填充的总成本中。

9- $（'＃cost'）。text（sign + cost）; - 这里只是填写成本标签中的总成本并将Sign连接到它。

您可以从Here了解有关jquery的更多信息，这是一个很好的开始学习。

答案 2 :(得分：0)

好的，所以这里是免费的jQuery解决方案： （你可以在下面运行）

＆＃13;
＆＃13; 
function calc() {
  var elems = document.getElementsByClassName("someClass");
  var sum = 0;
  for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    var num = elem.innerHTML;
    num = num.substr(1);
    sum += Number(num);
    elem.style.background = "red"
  }
  document.getElementById("cost").innerHTML = "£" + sum;
}
＆＃13; 
html {
  background: url(../images/background.jpg) no-repeat center center fixed;
  background-size: cover;
  /* Applying image to whole html document */
}
body {
  margin: 10px auto;
}
p {
  font-family: "times new roman";
  font-size: 20px;
  padding-left: 40px;
  padding-right: 30px;
}
a:hover {
  color: red;
}
a:link {
  text-decoration: none;
  /* These are link styles */
}
h1 {
  color: blue;
  text-align: center;
  font-family: courier;
  font-size: 20px;
  background-color: #C0C0C0;
}
table th,
table td {
  padding: 10px;
  border: 1px solid black;
}
td {
  text-align: center;
  cursor: pointer;
}
h2 {
  color: blue;
  font-family: courier;
  font-size: 20px;
  text-align: left;
  padding-left: 40px;
  padding-right: 25px;
}
article {
  font-family: "times new roman";
  background-color: #FFFFFF;
  font-size: 20px;
  margin: 10px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  margin-left: 22%;
  margin-right: 20%;
  /* This is article section */
}
img {
  display: block;
  margin: 0 auto;
  margin-bottom: 5px;
  /* This is image section */
}
#footer {
  width: 640px;
  margin: auto;
  clear: both;
  color: white;
  text-align: center;
  /* This is footer section */
}
/* Below is navigation bar section */

#cssmenu li #cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  font-family: Helvetica;
  line-height: 1;
}
#cssmenu ul {
  background: #0033CC url(../images/pattern.png) top left repeat;
  list-style: none;
  margin-left: 26%;
  margin-right: 24%;
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu a:link,
#cssmenu a:visited {
  padding: 20px 25px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 -1px 1px #586835;
  border-right: 1px solid #839b4e;
}
#cssmenu a:hover {
  color: #6600FF;
  text-shadow: 0 1px 1px #bdcd9c;
}
#cssmenu li {
  float: left;
}
＆＃13; 
<body>
  <a id="TOP" name="GoTop"></a>
  <div id="cssmenu">
    <ul>
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="#">Detinations</a>
      </li>
    </ul>
  </div>
  <article>
    <h1> Three Different Cruise Tours </h1>
    <p>We are currently offering three different Cruise tours....</p>

    <h2> Paris & French Countryside Cruise tour </h2>
    <img src="images/french.jpg" alt="Paris and French" style="width:90%;height:400px">
    <p>You'll be dazzled by the city of romance with visits to the legendary Notre Dame Cathedral and the opulent Palace of Versailles....</p>
    <h2> Swiss Splendors Cruise tour </h2>
    <img src="images/swiss.jpg" alt="swiss splendors" style="width:90%;height:400px">
    <p>From the magnificent snow caps of the Bernese and Swiss Alps to the enchanting gardens surrounding Lake Como....</p>
    <h2>Europe's Imperial Treasures Cruise tour</h2>
    <img src="images/russia.jpg" alt="European" style="width:90%;height:400px">
    <p>You'll be immersed in the unique cultures of Budapest, Vienna and Prague ...</p>
    <h1> Price Guide </h1>
    <p>click on field to calculate the price.
      <p>

        <table id="flights">
          <thead>
            <tr>
              <th>Destination</th>
              <th>First</th>
              <th>Second</th>
              <th>Third</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>One</th>
              <td class="someClass">£400</td>
              <td>£450</td>
              <td>£500</td>
            </tr>
            <tr>
              <th>Two</th>
              <td class="someClass">£450</td>
              <td>£500</td>
              <td>£550</td>
            </tr>
            <tr>
              <th>Three</th>
              <td class="someClass">£500</td>
              <td>£550</td>
              <td>£600</td>
            </tr>
            <tr>
              <th>Four</th>
              <td class="someClass">£550</td>
              <td>£600</td>
              <td>£650</td>
            </tr>
            <tr>
              <th>Five</th>
              <td class="someClass">£600</td>
              <td>£650</td>
              <td>£700</td>
            </tr>
          </tbody>
        </table>

        <button onclick="calc()">calculate first col</button>
        <label>Cost:</label>
        <label id="cost"></label>

  </article>
  <div id="footer">
    <br>
    <p>&copy; 2014</p>
  </div>
  <a href="#TOP">Go To Top</a>	
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题