JavaScript - 我想隐藏我创建的网页上的某些按钮

Question

我做了一个电子商务网站。因此，当下订单时，用户必须等待订单确认。所以，有两个按钮在订单没有被确认之前是没有用的

JavaScript代码如下:

var docketDownlondLink = "--"; var rescheduled_pickupLink = "--";
if(ordertype == 'courier'){
$('#btnDownloadDockets').css('display','none');
$('#btnDownloadDockets').attr('data-orderid',order_id);
docketDownlondLink = '<a style="font-size: 14px;" href="https://s3-ap-southeast-1.amazonaws.com/cdn.geniebazaar.in/order/courierlabels/'+tracking_no+'.zip" class="" title="Download Docket"> <i class="fas fa-download"></i></a>';
rescheduled_pickupLink = '<a style="font-size: 14px;" href="/reschedulePickup/'+encoded_cart_id+'" class="" title="Reschedule Pickup"><i class="far fa-clock"></i> </a>';
}else{
$('#btnDownloadDockets').css('display','none');
$('#btnDownloadDockets').attr('data-orderid',"");
}
orderStatus = status;
if(address.trim() == ""){
if(typeof street != "undefined"){
address += street;
}
if(typeof landmark != "undefined"){
address += landmark;
}         
if(typeof postal_code != "undefined"){
address += " - "+postal_code;
}
}
if(typeof courier_code == 'undefined'){
courier_code = "";
}

if(description.trim() != ""){
itemname += "<br/>"+description;
}
if(mode_of_transport.trim() != ""){
itemname += "<br/> Mode: "+mode_of_transport;
}
if(courier_code != ""){
itemname += "<br/> Courier: "+courier_code.toUpperCase();
}

if(tracking_no.trim() != ""){
itemname += "<br/>Docket : "+tracking_no;
}
if(pickup_num.trim() != ""){
itemname += "<br/>Pickup :"+pickup_num;
}
if(remark != ""){
itemname += "<br/>Remark :"+remark;
}

if(typeof courierStatus != 'undefined'){
if(courierStatus == ""){
courierStatus = status;
}
}

var isFreeItem = 0;
if(amt <=0 && typeof couponCode != 'undefined'){
isFreeItem = 1;
}

var markup = "<tr>";


markup += "<td> <input type='checkbox' name='record' class='cart_id_input' id='cart_id_input_"+cartid+"' data-cart_item='"+itemname.replace(regexRemoveSpecialCharacters, '')+"' data-cart_id="+cartid+" value="+cartid+"> </td>"+
"<td> <span style='text-decoration:"+textDecoration+"'>" + (itemname).replace(regexRemoveSpecialCharacters, '') + '</span> <br/> '+substitute_product_name.replace(regexRemoveSpecialCharacters, '')+' <input type="hidden" name="product[]" value='+escape(itemname)+' />  <input type="hidden" name="serviceid[]" value='+serviceid+' >  ';

if(cartorderType == 'courier'){
markup += "<a href='javascript:void(0);' data-cartid="+cartid+" class='viewCourierDetails'>View More</a>";
}
markup += "</td>";

markup += "<td>"+hsnCode+"</td>"            
if(isFreeItem == 1){
markup +="<td class='text-center'>" + quantity + ' <input type="hidden" name="qty[]" value='+escape(quantity)+' /> </td>';
markup +="<td class='text-center'> "+shippedQty+" <input type='hidden' name='shipped_qty[]' value="+shippedQty+" /> </td>"+
"<td> Free <input type='hidden' name='price[]' value="+amt+" /> </td>"+
"<td> Free <input type='hidden' name='gst[]' value="+cart_amount+" /> </td>";
}else{
if((status =="approval_pending" || orderType != 'genie') && shippedQty <= 0 ){
markup +="<td class='text-center'><input type='number' name='qty[]' style='width:30%;' class='cart_quantity_input' data-cart_id="+cartid+" value="+escape(quantity)+" /> </td>";
}else{       
markup +="<td class='text-center'>" + quantity + ' <input type="hidden" name="qty[]" value='+escape(quantity)+' /> </td>';
}

markup +="<td class='text-center'> "+shippedQty+" <input type='hidden' name='shipped_qty[]' value="+shippedQty+" /> </td>"+
"<td>" + amt + " <input type='hidden' name='price[]' value="+amt+" /> </td>"+
"<td>" + cart_amount.toFixed(2) + " <input type='hidden' name='gst[]' value="+cart_amount+" /> </td>";
}

if(ordertype == 'courier'){
markup +="<td>" + courierStatus + " <input type='hidden' name='gst[]' value="+status+" /> </td>";
}else{
markup +="<td>" + status + " <input type='hidden' name='gst[]' value="+status+" /> </td>";
}

if(docketDownlondLink != "--"){
markup +="<td>" + docketDownlondLink+" | "+ rescheduled_pickupLink + "</td>";
$('#td-action').css('display','block');
}else{
$('#td-action').css('display','none');
}

markup +="</tr>";
$('#itemlist tbody').append(markup);
}
}

所以我想要的是隐藏按钮，直到订单被确认，并显示它一旦它被确认。有人能帮我一下吗?

Answer 1

有许多不同的方法可以实现这一点，并取决于您的需要。我将与你分享其中的一个。

首先，我们需要定义我们如何知道订单已确认?我们正在从API中提取订单信息，或者我们是否有权访问状态更改?

如果第一个答案是肯定的，我们可以这样做您将需要设置元素的基类显示为none，然后创建第二个类称为show与display: block或任何您需要的显示在您的布局

const getState = () => {
const confirmation = fetch(...)
if (confirmation) {
const el = document.getElementById('#id')
el.classList.add('show')
}
}

Answer 2

您可以运行一个小脚本来调用按钮

function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

#myDIV {
background-color: blue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:10px;
}
button {
background-color: GREEN;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:10px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

<button onclick="myFunction()">CONFIRM</button>
<button type="submit" id="myDIV">SUBMIT</button>
<script>
</script>
</body>
</html>