Heim > Web-Frontend > js-Tutorial > So implementieren Sie die Funktion zur Berechnung des Warenkorbpreises mit jQuery_jquery

So implementieren Sie die Funktion zur Berechnung des Warenkorbpreises mit jQuery_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-05-16 16:07:45
Original
1646 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery die Funktion zur Berechnung des Warenkorbpreises implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Zweck

Ändern Sie die Anzahl der Artikel im Warenkorb in der HTML-Schnittstelle und ändern Sie die Zwischensumme und die Gesamtsumme der Produktpreise im Warenkorb.

Umsetzungsideen

1. Wenn Sie auf klicken, um die Benutzeroberfläche aufzurufen und zu aktualisieren, wird die Methode onload="" im Textkörper ausgelöst und springt zum JS-Code. Der Grund dafür ist, dass wir in der Datenbank nur die Anzahl der Artikel speichern, die ein Kunde kaufen möchte, nicht jedoch die Zwischensumme aus dem Preis jeder Artikelart und dem Gesamtpreis aller Artikel im Warenkorb. Der Zweck der Initialisierung besteht darin, diese Elemente zu speichern. Die Zahlen werden berechnet und auf der Frontschnittstelle angezeigt.

2. Wenn die Menge jedes Artikels im Mengeneingabefeld geändert wird, ändern sich der Preis des gesamten Einkaufslistenartikels, die Zwischensumme und die Gesamtsumme des Artikels entsprechend der Menge.

Fertige Produktmusteranzeige

Alle Codes (Firefox)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<!DOCTYPE HTML>

<html>

 <head>

  <title>cart</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <!-- 要把jquery-1.9.1.min.js导进去,不导出不来 -->

  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>

  <script language="javascript">

$(function(){

var size=3.0*$('#image1').width();

$("#image1").mouseover(function(event) {

var $target=$(event.target);

if($target.is('img'))

{

$("<img id='tip' src='"+$target.attr("src")+"'>").css({

"height":size,

"width":size,

}).appendTo($("#imgtest"));/*将当前所有匹配元素追加到指定元素内部的末尾位置。*/

}

}).mouseout(function() {

$("#tip").remove();/*移除元素*/

})

 

})

</script>

  <script type="text/javascript">

function total(id)

{

/*计算单个的价格*/

var quantity=document.getElementById("quantity"+id).value;

var price=document.getElementById("price"+id).value;

var smallTotal=quantity*price;

var smallT=document.getElementById("smallTotal"+id);

smallT.innerHTML=smallTotal;

 

/*计算总价格*/

var totalPrice=0;

for(var a=1;a<3;a++){

var quantity=document.getElementById("quantity"+a).value;

var price=document.getElementById("price"+a).value;

var smallTotal=quantity*price;

totalPrice=totalPrice+smallTotal;

}

var total=document.getElementById("total");

total.innerHTML=totalPrice;

}

</script>

  <script type="text/javascript">

function initialize()

{

var totalPrice=0;

for(var a=1;a<3;a++){

var quantity=document.getElementById("quantity"+a).value;

var price=document.getElementById("price"+a).value;

var smallTotal=quantity*price;

totalPrice=totalPrice+smallTotal;

/*alert(smallTotal);*/

var smallT=document.getElementById("smallTotal"+a);

smallT.innerHTML=smallTotal;

}

/*取出购物车的所有商品的价格总和*/

var total=document.getElementById("total");

total.innerHTML=totalPrice;

}

</script>

  <style type="text/css">

#imgtest {

 position: absolute;

 top: 100px;

 left: 400px;

 z-index: 1;

}

table {

 left: 100px;

 font-size: 20px;

}

</style>

 </head>

 <body onload="initialize()">

  <div id="imgtest"></div>

  <br />

  <br />

  <table border="1" style="text-align: center;" align="center">

   <thead style="height: 50">

    <td style="WIDTH: 300px">

     商品名称

    </td>

    <td style="WIDTH: 60px">

     图片

    </td>

    <td style="WIDTH: 170px">

     数量

    </td>

    <td style="WIDTH: 170px">

     价格

    </td>

    <td style="WIDTH: 250px">

     小计

    </td>

   </thead>

   <tbody>

    <tr>

     <td class="name">商品1</td>

     <td class="image">

      <img src="1.jpg" width="40px" height="40px" id="image1"/>

     </td>

     <td class="quantity">

      <input id="quantity1" value="1" onblur="total(1);"/>

     </td>

     <td class="price">

      <input type="hidden" id="price1" value="20"/>

      20

     </td>

     <td class="total">

      <span id="smallTotal1"></span> 元

     </td>

    </tr>

    <tr>

     <td class="name">商品2</td>

     <td class="image">

      <img src="1.jpg" width="40px" height="40px" id="image1"/>

     </td>

     <td class="quantity">

      <input id="quantity2" value="2" onblur="total(2);"/>

     </td>

     <td class="price">

      <input type="hidden" id="price2" value="30"/>

      30

     </td>

     <td class="total">

      <span id="smallTotal2"></span> 元

     </td>

    </tr>

    <tr>

     <td colspan="4" class="cart_total">

      <br>

     </td>

     <td>

      <span class="red">总计:</span><span id="total"></span>  元

     </td>

    </tr>

   </tbody>

  </table>

 </body>

</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage