使用JQuery-单击事件

Question

所以...我做了一个页面，您可以在其中找到一些产品，每个产品都有价格/说明/标题。 我目前正在尝试更改价格，但问题是，如果您单击按钮（与销售相关），我希望它们进行更改。 我想更改价格并添加20％的折扣。

我开始做一些事情，仅将价格的颜色从黑色更改为红色：

$(".row a").click(function(){
  $("cat-bonnet").css("color","red");
}); 

我通过CSS选择了我的东西的类。 但是现在我不知道该如何增加折扣。 我应该创建另一个代码吗？ 单击按钮时该怎么做？

提前致谢。

Answer 1

$("cat-bonnet")会尝试在DOM中定位<cat-bonnet></cat-bonnet> 。

您必须指定它是：类$(".cat-bonnet")或ID： $("#cat-bonnet")

Answer 2

使用来指定cat-bonnet的class或id . 一类或#为ID：

 $(".row a").click(function(e){ $(".cat-bonnet").css("color","red"); // Add '.' here e.preventDefault(); // stop page from redirecting (to see change effect) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <a class="cat-bonnet" href="https://www.google.com">Link</a> </div> 

Answer 3

好吧，用一块普通的javascript相当容易完成：

document.querySelector(".cat-bonnet").innerHTML = newPrice;

newPrice应该是您计算出的折扣。 因此，您应该获得.cat-bonnet的价格并计算20％的折扣。 这可以通过变量let = newPrice;来完成let = newPrice; 或内联。

jQuery是一个大型库，根据您上面的代码，您可能仅使用原始javascript可能会更好。 但是，只需添加上述行即可为您解决问题。

Answer 4

add discount什么作用？ 它将数据发布到apu端点吗？ 或者只是更改html？ 或其他任何流程？

Answer 5

我建议您对代码进行稍微不同的设置，以便将来将来更容易添加更多属性。 我还提出了一种检查各种ON动作的方法，例如'mouseenter' ， 'mouseleave'等。

看看下面的代码。 我认为，当您的项目变大时，这将使阅读起来容易得多。

 $(".row a").on('click', () => { // Insert mouseenter, mouseleave etc where click is $(".cat-bonnet").css({ color: "red", backgroundColor: "gray" // Add more properties inside the object here as you wish }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <a class="cat-bonnet" href="https://www.google.com">Link</a> </div>