2017-12-31 163 views
1

API Ajax 호출에서 div의 구성 요소가 동적으로 추가됩니다. 각 텍스트 줄은 한 줄에 있으며, 줄 바꿈을하지 않고 아래 줄에 줄 바꿈합니다. CSS 스타일의 클래스를 통해 단어 분리 및 오버플로 랩을 시도한 다음 클래스를 동적으로 추가했습니다. 나는 변화가 없다. 덧붙여서, 내 총알 포인트는 각 성분 라인 앞에서 나타나지 않습니다.동적으로 추가 된 div에 단어가 깨지지 않는 overflow-wrap

기본 CSS 스타일 시트 위에 CSS 스타일 시트가 연결되어 있고 링크되어 있습니다.

https://imgur.com/a/i0ZJc - 스크린 샷

자바 스크립트

$(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;}.

크롬과 사파리에서 저에게는 효과가있는 것 같습니다. 또는 전체 ulul {white-space: normal;}을 사용하면 모든 목록 항목이 상속됩니다.

+0

위대한 작품입니다. 감사! –