Question

我正在尝试在结帐页面上执行“应用促销代码”功能。因此，我已经成功创建了一个功能，您可以单击“应用促销代码”文本，然后使用“应用”按钮打开一个文本字段。然后，用户可以促销代码，然后单击“应用”以使用促销。现在，我要进一步实现的是，一旦用户插入优惠券并单击“应用”按钮，输入字段和按钮应替换为“促销代码：Welcome25”和删除收藏夹图标，然后切换回以应用促销代码阶段，通过单击实际代码，他可以再次使用输入和应用按钮对其进行编辑。

有人可以帮我提供已经存在的代码吗？

HTML：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<!-- START OF PROMO CODE -->
<div class="mt-3 text-center">
<a href="javascript:void(0)" id="promo-code">Apply a promo code</a>
</div>
<div id="promo-box">
<span class="col-9 float-left pl-0 pr-0">
<input type="text" class="checkout-promo-code-input" placeholder="Enter promo code">
</span>
<span class="col-3 float-left">
<button class="btn btn-primary">Apply</button>
</span>
</div>
<div class="mt-3 float-left promo-edit">
Promo Code:&nbsp; <a href=""><u>WELCOME25</u></a>
</div>
<div class="mt-3 float-right">
<a href="#"><i class="far fa-trash-alt trash-checkout"></i></a>
</div>

CSS：

.trash-checkout {
color: rgba(0,0,0,.7);
}

.trash-checkout:hover {
color: #dc3545;
}

.promo-edit {
font-weight: 600;
color: rgba(0,0,0,.7);
font-size: 15px;
}

.promo-edit a {
color: #000000;
}

#promo-code {
text-align: center;
font-size: 15px;
}

#promo-box {
display: none;
}

input.checkout-promo-code-input {
color: #333333 !important;
font-family: 'Source Sans Pro', sans-serif;
border: 2px solid #e0e6e8;
border-radius: 3px;
font-size: 15px;
font-weight: 400 !important;
height: 35px;
position: relative;
width: 100%;
padding-left: 10px;

}

input.checkout-promo-code-input:focus {
border-color: #25c16f;
outline: 0;
box-shadow: none;
border-bottom: solid 2px #25c16f;
}

JS：

/* Promo Code onClick function on Checkout Page */
$("#promo-code").click(function(){
document.getElementById("promo-code").style.display = "none";
document.getElementById("promo-box").style.display = "block";
});

https://www.bootply.com/spq1CDfBxB

Answer 1

在输入中添加一个空值：

<input type="text" class="checkout-promo-code-input" placeholder="Enter promo code" value="">

然后，您需要将促销文字应用于该值，这样，如果促销代码发生更改，它就会被动态获取-只需将以下内容添加到您的javascript中即可。

$(".checkout-promo-code-input").val($(".promo-edit a").text());

https://www.bootply.com/zOOExLoE0s

Answer 2

为此，按钮应替换为：“促销代码：Welcome25”，您必须给按钮标签提供ID。

<button class="btn btn-primary" id="applybtn">Apply</button>

然后单击“应用”，按钮值将被下面的代码替换。

$("#applybtn").html('Promo Code: '+$(".promo-edit a").text());

https://www.bootply.com/L6RGZOIuuo

如何创建适用于促销代码的完整功能

2 个答案: