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

通过将class用于类或将id用于id，来指定cat-bonnet的{{1}}或.：

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

Answer 3

用一段原始的javascript相当容易做到：

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

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

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

Answer 4

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

Answer 5

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

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

$(".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>

使用JQuery-单击事件

5 个答案: