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 中提取订单信息，还是我们有权访问该状态更改？

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

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>