2017-12-31 254 views
1

API Ajax呼び出しからレシピの成分がdivに動的に追加されます。テキストの各行は、1行にとどまります。つまり、下の行に折り返されずに折り返されません。 CSSスタイルのクラスを使用して単語区切りとオーバーフローラップを追加し、クラスを動的に追加しました。私は変化がない。ちなみに、私の弾丸は各成分ラインの前にも現われません。オーバーフローラップが動的に追加されたdivを壊していないdiv

メインCSSスタイルシートの上にスタイルシートが添付されてリンクされています。

https://imgur.com/a/i0ZJc - スクリーンショット

は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

作業中のページがなくてもCSSの問題を解決するのは非常に困難です。あなたはCodepenまたはサイトがホストされている他の場所にリンクできますか? –

+1

https://wbwelch.github.io/DayTripper/stayin.htmlこれで十分でしょうか? –

+0

私はいくつかのjsエラーを見ています - Uncaught TypeError:未定義のプロパティ 'recipe'を読み取ることができません – JasonB

答えて

2

使用li {white-space: normal;}

ChromeとSafariで動作するようです。 また、ulul {white-space: normal;}を使用し、すべてのリスト項目が継承されます。

+0

素晴らしいです。ありがとう! –

関連する問題