2017-12-31 57 views
1

Zutaten für ein Rezept werden dynamisch zu einem div von einem API Ajax-Aufruf hinzugefügt. Jede Textzeile bleibt in einer Zeile, was bedeutet, dass sie nicht in die darunter liegende Zeile einbricht. Ich habe versucht, Word-Break und Overflow-Wrap über eine CSS-Klasse hinzugefügt und dann die Klasse dynamisch hinzufügen. Ich bekomme keine Veränderung. Übrigens werden meine Punkte auch nicht vor jeder Zutat erscheinen.overflow-wrap nicht Wort bei dynamisch hinzugefügt div

Ich habe ein CSS-Reset-Stylesheet angefügt und verlinkt über meinem CSS-Stylesheet.

https://imgur.com/a/i0ZJc - Screenshot

JavaScript

$(document).ready(function(){ 

function recipeSearch(foodtype){ 
var searchTerm = $(this).attr("data-name"); 
var queryURL = "https://api.edamam.com/search?q=" + foodtype + "&app_id=c13467eb&app_key=9cd5b15a4c49f23093c8fe1f1d2c7ce4" 

$.ajax({ 
     url: queryURL, 
     method: "GET" 
    }) 
    .done(function(response) { 
     console.log(response); 


     for (var k = 0; k<10; k++){ 
      var foodDiv = $("<div class = 'recipeCard'>"); 


       if (response.hits.length === 0) { 
        $("#recipeOutput").append("<p>" + "Please enter valid recipe ingredient or name." + "</p>"); 
       }; 

      var recipeName = response.hits[k].recipe.label; 
      var pOne = $("<p>").html("<h2>" + recipeName + "</h2>"); 
      foodDiv.append(pOne); 

      var recipePic = response.hits[k].recipe.image; 
      var pTwo = $("<img class='recipeImage'>").attr("src", recipePic); 
      foodDiv.append(pTwo); 

      var recipeURL = response.hits[k].recipe.shareAs; 
      var pThree =$("<p>").html("<a target='_blank' href='" + recipeURL + "'>" + "Get full recipe here" + "</a>"); 
      foodDiv.append(pThree); 

      var length = response.hits[k].recipe.ingredients.length; 

      var ingList = $("<ul>"); 
      for (var i = 0; i < length; i++){ 

       var ing = response.hits[k].recipe.ingredients[i].text; 
       var pFour = $("<li class='loopText wordBreak'>").text(ing); 
       ingList.append(pFour); 
      }; 
      foodDiv.append(ingList); 

      var health = response.hits[k].recipe.healthLabels; 
      var pFive = $("<p>").text(health); 
      foodDiv.append(pFive); 

      $("#recipeOutput").append(foodDiv); 
     } 

    }); 
}; 


function clear(){ 
    $("#recipeOutput").empty(); 
} 

$("#recipeSearch").on("click", function(event){ 
    var foodtype = $("#recipeInput").val().trim(); 
    clear(); 
    recipeSearch(foodtype); 
    return false; 
}); 
}); 

$("#recipeInput").keyup(function(event) { 
if (event.keyCode === 13) { 
    $("#recipeSearch").click(); 
} 
}); 

CSS

li.loopText { 
    display: block; 
    overflow-wrap: break-all; 
    padding: 2px; 
    margin 1px auto; 
    list-style-type: circle; 
} 
label { 
    color: white; 
} 
wordBreak { 
    overflow-wrap: break-word; 
} 

HTML

 <div class="col s12 m12 l6 xl6"> 
      <div class=" panel-boxes"> 
       <div class="panel-heading">WHAT WOULD YOU LIKE TO COOK?</div> 
       <div class="panel-body"> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="recipeInput"> 
         <button type="search" class="btn" id="recipeSearch" style="margin-right: 20px; margin-left: 15px">Search</button> 
        </div> 
        <div class="panel-body recipesContainer" id="recipeOutput" ></div> 
       </div> 
      </div> 
     </div> 
+1

Sehr schwierig, CSS-Probleme zu helfen, ohne eine funktionierende Seite zu haben. Können Sie eine Verknüpfung zu einem Codepen oder einem anderen Ort herstellen, auf dem die Website gehostet wird? –

+1

https://wbwelch.github.io/DayTripper/stayin.html Wird dies ausreichen? –

+0

Ich sehe einige js Fehler - Uncaught TypeError: Kann Eigenschaft "Rezept" von undefined nicht lesen – JasonB

Antwort

2

Verwenden li {white-space: normal;} für die Listeneinträge.

Das scheint für mich in Chrome und Safari zu arbeiten. Alternativ ul {white-space: normal;} für das gesamte ul verwenden, und alle Listenelemente erben es.

+0

Funktioniert gut. Vielen Dank! –

Verwandte Themen