Wie ändert man die Farbe eines dynamisch erzeugten Elements, wenn eine bestimmte Bedingung zutrifft?

Ich habe einige dynamische Produkte erstellt. Was ich will, ist, dass, wenn die Produktmenge zum Beispiel 3 abnimmt, orange wird oder wenn es nur noch übrig ist, dann rot werden. Hier ist die Javascript der dynamischen Produkte für die Admin-Ansicht:Wie ändert man die Farbe eines dynamisch erzeugten Elements, wenn eine bestimmte Bedingung zutrifft?

function showProductAdmin() { 

     lblProductList.innerHTML = ""; 

     for (var i = 0; i < ajProductDataFromServer.length; i++) { 

      var lblProduct = '<div class="lblProduct">' + '<img src="' + ajProductDataFromServer[i].image + '"width="85%" alt="product" class="lblProductImage" data-productImage="' + ajProductDataFromServer[i].image + '">' + '<h3 class ="lblProductName" data-productName="' + ajProductDataFromServer[i].name + '" >' + ajProductDataFromServer[i].name + '</h3>' + '<h3 class ="lblProductPrice" data-productPrice="' + ajProductDataFromServer[i].price + '">' + 'Price:' + ' ' + ajProductDataFromServer[i].price + '<h3 class ="lblProductQuantity" data-productQuantity="' + ajProductDataFromServer[i].quantity + '">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + '</h3>' + '<button id="btnEditProductBody" class="btnShowPage btnEditProduct" data-showThisPage="pageUpdateProduct" data-productId="' + ajProductDataFromServer[i].id + '">' + 'EDIT PRODUCT' + '</button>' + '<button class="btnDeleteProduct" data-productId="' + ajProductDataFromServer[i].id + '" >' + 'DELETE PRODUCT' + '</button>' + '<h3 class="lblErrorMessage" id="lblDeleteProductErrorMessage">' + '</h3>' + '</div>'; 

      lblProductList.insertAdjacentHTML('beforeend', lblProduct); 
      showPages(); 

     } 


    }

und dann für die Benutzeransicht:

function showProduct() { 

     lblProductList.innerHTML = ""; 

     for (var i = 0; i < ajProductDataFromServer.length; i++) { 

      var lblProduct = '<div class ="lblProduct">' + '<img src="' + ajProductDataFromServer[i].image + '" width="85%" alt="product">' + '<h3 class ="lblProductName">' + ajProductDataFromServer[i].name + '</h3>' + '<h3 class ="lblProductPrice">' + 'Price:' + ' ' + ajProductDataFromServer[i].price + '<h3 class ="lblProductQuantity">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + '</h3>' + '<button class="btnBuyProduct" data-productId="' + ajProductDataFromServer[i].id + '" >' + 'BUY PRODUCT' + '</button>' + '</div>'; 

      lblProductList.insertAdjacentHTML('beforeend', lblProduct); 
     } 

    }

hier auch das btnBuyProduct Click-Ereignis:

// BUY product for user 
    document.addEventListener("click", function(e) { 

     if (e.target.classList.contains("btnBuyProduct")) { 

      sProductId = e.target.getAttribute("data-productId"); 
      console.log(sProductId); 
      var sUrl = "api_buy_product.php?id=" + sProductId; 

      var request = new XMLHttpRequest(); 
      request.onreadystatechange = function() { 
       if (this.readyState == 4 && this.status == 200) { 

        ajProductDataFromServer = JSON.parse(this.responseText); 
        console.log("Response:" + ajProductDataFromServer); 

        if (ajProductDataFromServer.buy == "ok") { 

         if (!window.Notification) { 

          alert("Sorry, Notification Not supported in this Browser!"); 

         } else { 

          if (Notification.permission === 'granted') { 

           notify = new Notification('SHOPAHOLIC.com', { 
            body: 'The product has been added to your shopping cart!"', // the name of the pruduct 
            icon: 'img_webshop/Fashion-Logo-6.png' // I could show the respective product image 
           }); 
          } 
         } 


         playSound(); 

         getajProductData(); 

         //console.log(ajProductDataFromServer.quantity); 
         console.log("PRODUCT QUANTITY DECREASED IN THE DATABASE"); 

        } else { 

         console.log("PRODUCT QUANTITY DID NOT DECREASE IN THE DATABASE"); 
         lblDeleteProductErrorMessage.innerHTML = ""; 
         var sDeleteProductErrorMessage = "Deleting Product Failed - Try again"; 
         lblDeleteProductErrorMessage.insertAdjacentHTML('beforeend', sDeleteProductErrorMessage); 

        } 
       } 
      } 

      request.open("GET", "api_buy_product.php?id=" + sProductId, true); 
      request.send(); 

     } 

    });

Was wäre der einfachste Weg, diese Farbänderung für die Admin- und die Benutzeransicht zu aktualisieren?

Quelle

2017-10-12 codeDragon

PS: Ich habe auch, dass die Zahl es wird nur möchte Farbe und nicht das ganze h3-Element. – codeDragon

Wenn Produkte Menge anzeigt, wickeln Sie die Nummer in das <span> Element, und auf der Grundlage der ajProductDataFromServer[i].quantity, fügen Sie passende Klassen zum Einwickeln <span>:

CSS:

span.orange { color: orange; } 
span.red { color: red; } 
span.green { color: green }

In Ihrem showProduct():

1) Vor der var lblProduct = ..., fügen Sie hinzu:

var className = ''; 

if(ajProductDataFromServer[i].quantity > 3) { 
    className = 'green'; 
} else if(ajProductDataFromServer[i].quantity <= 1) { 
    className = 'red'; 
} else { 
    className = 'orange'; 
}

oder kürzere Version:

var q   = ajProductDataFromServer[i].quantity; 
var className = q > 3 ? 'green' : q <= 1 ? 'red' : 'orange';

und dann ersetzen diesen Teil:

'<h3 class ="lblProductQuantity">' + 
    'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + 
'</h3>'

mit diesem:

'<h3 class ="lblProductQuantity">' + 
    'Quantity:' + 
    ' ' + 
    '<span class=' + className + '>' + 
     ajProductDataFromServer[i].quantity + 
    '</span>' + 
'</h3>'

Quelle

2017-11-07 14:53:45 wscourge

Wie ändert man die Farbe eines dynamisch erzeugten Elements, wenn eine bestimmte Bedingung zutrifft?

Antwort

Verwandte Themen