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>
작업 페이지가 없어도 CSS 문제를 해결하는 것은 매우 어렵습니다. Codepen 또는 사이트가 호스팅되는 다른 곳으로 연결할 수 있습니까? –
https://wbwelch.github.io/DayTripper/stayin.html 충분하니? –
일부 js 오류가 표시됩니다. Uncaught TypeError : 정의되지 않은 'recipe'속성을 읽을 수 없습니다. – JasonB