Javascript代码（使用jQuery）

Question

所以我正在为一个朋友在一个网站上工作，在这个网站上，他为他的客户提供了4种不同的服务。他在网站上想要的是让客户能够点击一个图标，然后在它旁边显示所述服务的价格。他还希望客户能够点击其他图标并根据他们选择的内容提高价格。

示例：

服务1 =£60

服务2 =£80

服务3 = 100英镑

服务4 = 120英镑

客户点击服务1，总价格= 60英镑。

客户还点击服务2，因此总价格= 140英镑。

我已经尝试了一段时间来弄清楚如何使用它，但我对javaScript没有任何经验，所以我设法得到的最好的是：

var service1 = 60;
var service2 = 80;
var service3 = 100;
var service4 = 120;

function myFunction() {
document.getElementById("generated").innerHTML = service1;
}

function myFunction2() {
document.getElementById("generated").innerHTML = service2;
}

function myFunction3() {
document.getElementById("generated").innerHTML = service3;
}

function myFunction4() {
document.getElementById("generated").innerHTML = service4;
}

当然，我的HTML为每个服务都有一个onclick标记，然后将价格添加到“生成的”ID标记中。

我会感激任何帮助！约翰

Answer 1

Javascript代码（使用jQuery）

var prices = [];
prices["service1"] = 60;
prices["service2"] = 80;
prices["service3"] = 100;
prices["service4"] = 120;

var generated = 0;

$(".add_service").click(function () {
  var desired_service = $(this).attr("id");
  generated += prices[desired_service];
  $("#generated").html("Total Price = £" + generated);
});

在JSFiddle上试用。

的说明

我创建了四个具有相同类的按钮，然后使用jQuery .click()方法为每个按钮绑定了一个事件处理程序。然后，通过读取单击按钮的id属性，可以知道用户想要的服务（感谢jQuery .attr()方法）。

使用javaScript添加多个HTML项目？

1 个答案:

Javascript代码（使用jQuery）

的说明