교육용 도움말이 필요합니다. 방금 JS 학습을 시작했으며 내 지식으로는 충분하지 않습니다. 문제 : 무작위 범주로 생성되는 HTML 페이지에 대해 chooseRandomCategory() (2 단계) 함수로 전달할 수 있습니까? 해결 방법에 대해 조언 해주세요. 같은 방법으로 해결임의의 카테고리 픽업을위한 함수 호출
(function (global) {
var dc = {};
var homeHtmlUrl = "snippets/home-snippet.html";
var allCategoriesUrl =
"https://davids-restaurant.herokuapp.com/categories.json";
var categoriesTitleHtml = "snippets/categories-title-snippet.html";
var categoryHtml = "snippets/category-snippet.html";
var menuItemsUrl =
"https://davids-restaurant.herokuapp.com/menu_items.json?category=";
var menuItemsTitleHtml = "snippets/menu-items-title.html";
var menuItemHtml = "snippets/menu-item.html";
// Convenience function for inserting innerHTML for 'select'
var insertHtml = function (selector, html) {
var targetElem = document.querySelector(selector);
targetElem.innerHTML = html;
};
// Return substitute of '{{propName}}'
// with propValue in given 'string'
var insertProperty = function (string, propName, propValue) {
var propToReplace = "{{" + propName + "}}";
string = string
.replace(new RegExp(propToReplace, "g"), propValue);
return string;
}
// On page load (before images or CSS)
document.addEventListener("DOMContentLoaded", function (event) {
// TODO: STEP 0: Look over the code from
// *** start ***
// to
// *** finish ***
// below.
// We changed this code to retrieve all categories from the server instead of
// simply requesting home HTML snippet. We now also have another function
// called buildAndShowHomeHTML that will receive all the categories from the server
// and process them: choose random category, retrieve home HTML snippet, insert that
// random category into the home HTML snippet, and then insert that snippet into our
// main page (index.html).
//
// TODO: STEP 1: Substitute [...] below with the *value* of the function buildAndShowHomeHTML,
// so it can be called when server responds with the categories data.
// *** start ***
// On first load, show home view
showLoading("#main-content");
$ajaxUtils.sendGetRequest(
allCategoriesUrl,
buildAndShowHomeHTML, // ***** <---- TODO: STEP 1: Substitute [...] ******
true); // Explicitely setting the flag to get JSON from server processed into an object literal
});
// *** finish **
// Builds HTML for the home page based on categories array
// returned from the server.
function buildAndShowHomeHTML (categories) {
// Load home snippet page
$ajaxUtils.sendGetRequest(
homeHtmlUrl,
function (homeHtml) {
// TODO: STEP 2: Here, call chooseRandomCategory, passing it retrieved 'categories'
// Pay attention to what type of data that function returns vs what the chosenCategoryShortName
// variable's name implies it expects.
var chosenCategoryShortName = chooseRandomCategory(???);
// TODO: STEP 3: Substitute {{randomCategoryShortName}} in the home html snippet with the
// chosen category from STEP 2. Use existing insertProperty function for that purpose.
// Look through this code for an example of how to do use the insertProperty function.
// WARNING! You are inserting something that will have to result in a valid Javascript
// syntax because the substitution of {{randomCategoryShortName}} becomes an argument
// being passed into the $dc.loadMenuItems function. Think about what that argument needs
// to look like. For example, a valid call would look something like this:
// $dc.loadMenuItems('L')
// Hint: you need to surround the chosen category short name with something before inserting
// it into the home html snippet.
//
var homeHtmlToInsertIntoMainPage = insertProperty(homeHtml, "randomCategoryShortName", chosenCategoryShortName);
// TODO: STEP 4: Insert the the produced HTML in STEP 3 into the main page
// Use the existing insertHtml function for that purpose. Look through this code for an example
// of how to do that.
insertHtml("#main-content", homeHtmlToInsertIntoMainPage);
},
false); // False here because we are getting just regular HTML from the server, so no need to process JSON.
}
// Given array of category objects, returns a random category object.
function chooseRandomCategory (categories) {
// Choose a random index into the array (from 0 inclusively until array length (exclusively))
var randomArrayIndex = Math.floor(Math.random() * categories.length);
// return category object with that randomArrayIndex
return categories[randomArrayIndex];
}
global.$dc = dc;
})(window);
문제를 설명하는 데 필요한 최소 수준으로 코드를 편집하십시오. 너무 많은 코드입니다. – Amy
실례합니다. 코드 스 니펫이 축소되었지만 유용한 무언가를 잘라 내기가 두려워졌습니다. – Alex
질문에 대답을하기보다 자신의 대답을 만들어야하며, 더 좋은 대답을받지 못하면 결국 받아 들여야합니다. – StephenTG