Подумайте о том, чтобы сохранить информацию о фруктах в виде данных и использовать некоторые общие общие функции для визуализации.
Можете ли вы сообщить нам, откуда поступают 3D-данные, и мы можем добавить эту функцию.
let fruits = [{
name: "apple",
description: "An apple is a sweet, edible fruit produced by an apple tree (Malus pumila). Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus. The tree originated in Central Asia, where its wild ancestor, Malus sieversii, is still found today. Apples have been grown for thousands of years in Asia and Europe and were brought to North America by European colonists.",
color: "green"
},
{
name: "banana",
description: "A banana is an edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa. In some countries, bananas used for cooking may be called 'plantains.' Musa species are native to tropical Indomalaya and Australia, and are likely to have been first domesticated in Papua New Guinea. They are grown in 135 countries and the world's largest producers of bananas are India and China",
color: "gold"
},
{
name: "strawberry",
description: "The garden strawberry is a widely grown hybrid species of the genus Fragaria, collectively known as the strawberries. It is cultivated worldwide for its fruit. The fruit is widely appreciated for its characteristic aroma, bright red color, juicy texture, and sweetness.",
color: "red"
},
{
name: "orange",
description: "The orange is the fruit of the citrus species Citrus × sinensis in the family Rutaceae. It is known as the 'Sweet Orange.' It originated in ancient China and the earliest mention of the sweet orange was in Chinese literature in 314 BC. As of 1987, orange trees were found to be the most cultivated fruit tree in the world. In 2014, 70.9 million tonnes of oranges were grown worldwide, with Brazil producing 24% of the world total followed by China and India. Oranges are infertile and reproduce asexually.",
color: "peru"
},
{
name: "pineapple",
description: "The word 'pineapple' in English was first recorded to describe the reproductive organs of conifer trees (now termed pine cones). When European explorers encountered this tropical fruit in the Americas, they called them 'pineapples' (first referenced in 1664, for resemblance to pine cones). The plant is indigenous to South America and is said to originate from the area between southern Brazil and Paraguay. Columbus encountered the pineapple in 1493 on the leeward island of Guadeloupe. He called it piña de Indes, meaning 'pine of the Indians', and brought it back with him to Spain.",
color: "yellow"
},
{
name: "blueberry",
description: "Blueberries are perennial flowering plants with blue– or purple–colored berries. They are classified in the section Cyanococcus within the genus Vaccinium. Commercial 'blueberries' are all native to North America. They are covered in a protective coating of powdery epicuticular wax, colloquially known as the 'bloom'. They have a sweet taste when mature, with variable acidity.",
color: "blue"
},
{
name: "grape",
description: "A grape is a fruit, botanically a berry, of the deciduous woody vines of the flowering plant genus Vitis. Grapes are a non-climacteric type of fruit, generally occurring in clusters. The cultivation of the domesticated grape began 6,000–8,000 years ago in the Near East.[1] Yeast, one of the earliest domesticated microorganisms, occurs naturally on the skins of grapes, leading to the discovery of alcoholic drinks such as wine. The earliest archeological evidence for a dominant position of wine-making in human culture dates from 8,000 years ago in Georgia.",
color: "purple"
},
{
name: "lemon",
description: "The lemon, Citrus limon Osbeck, is a species of small evergreen tree in the flowering plant family Rutaceae, native to South Asia, primarily North eastern India. The juice of the lemon is about 5% to 6% citric acid, with a pH of around 2.2, giving it a sour taste. The distinctive sour taste of lemon juice makes it a key ingredient in drinks and foods such as lemonade and lemon meringue pie.",
color: "yellow"
},
{
name: "kiwi",
description: "Kiwi is the edible berry of several species of woody vines in the genus Actinidia. It has a fibrous, dull greenish-brown skin and bright green or golden flesh with rows of tiny, black, edible seeds. Kiwifruit is native to north-central and eastern China. The first recorded description of the kiwifruit dates to 12th century China during the Song dynasty. China produced 56% of the world total of kiwifruit in 2016.",
color: "green"
},
{
name: "watermelon",
description: "Citrullus lanatus is a plant species in the family Cucurbitaceae, a vine-like flowering plant originating in West Africa. It is cultivated for its fruit. There is evidence from seeds in Pharaoh tombs of watermelon cultivation in Ancient Egypt. Watermelon is grown in tropical and subtropical areas worldwide for its large edible fruit, also known as a watermelon, which is a special kind of berry with a hard rind and no internal division, botanically called a pepo.",
color: "crimson"
},
{
name: "peach",
description: "The peach (Prunus persica) is a deciduous tree native to the region of Northwest China between the Tarim Basin and the north slopes of the Kunlun Mountains, where it was first domesticated and cultivated. The specific name persica refers to its widespread cultivation in Persia (modern-day Iran), from where it was transplanted to Europe. China alone produced 58% of the world's total for peaches and nectarines in 2016.",
color: "peru"
}
];
function resetStyle() {
document.querySelectorAll('li').forEach(x => x.style.color = 'hotpink');
}
function setFruit(fruit) {
console.log(`loading ${fruit.name}`);
let elem = document.getElementById(fruit.name);
elem.style.color = fruit.color;
fruitName = document.getElementById('fruitName');
fruitName.innerText = fruit.name;
fruitDesc = document.getElementById('fruitDesc');
fruitDesc.innerText = fruit.description;
//activate 3d view window
var x = document.getElementById('x');
x.innerHTML = 1;
}
document.addEventListener('click', (e) => {
if (e.target.matches('li')) {
resetStyle();
setFruit(fruits.find(f => f.name === e.target.id));
}
});
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.container {
background-color: beige;
width: 600px;
min-height: 550px;
border-radius: 30px;
margin: 40px auto;
}
.title {
font-family: sans-serif;
margin: 20px 20px 20px 20px;
color: indianred;
display: inline-block;
float: left;
}
.box3d {
float: right;
height: 225px;
width: 280px;
background-color: slategray;
display: inline-block;
margin: 25px 50px 0px 0px;
}
.desc {
float: right;
height: 225px;
width: 350px;
background-color: white;
display: inline-block;
margin: 25px 50px 0px 0px;
overflow: auto;
}
.fruitlist {
padding-left: 20px;
margin: 20px 0px 0px 30px;
list-style: none;
display: inline-block;
float: left;
}
li {
margin-bottom: 12px;
font-family: sans-serif;
color: purple;
font-size: 18px;
}
li:hover {
font-size: 20px;
color: hotpink;
}
#fruitName {
color: blue;
margin: 10px 10px 10px 10px;
border-bottom: solid 3px blue;
font-family: sans-serif;
}
#fruitDesc {
margin: 10px 10px 0px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FruityView</title>
<link rel="stylesheet" href="fruitstyle.css">
</head>
<body>
<div class="container">
<h1 class="title">FruityView</h1>
<!--3D MODEL VIEW WINDOW-->
<div class="box3d" id="box3d">
<p id='x'>0</p>
<script>
//this doesn't work - maybe I could do some sort of for loop that could retest it?
var x = document.getElementById('x');
console.log(x);
function view3d() {
console.log("view function activated");
}
if (x == 1) {
view3d();
}
//this doesn't work - I know it would if it came after the list but I don't want to do that
/*var peach = document.getElementById('peach').onclick = peach;
peach() {
console.log("successful activation");
}
*/
</script>
</div>
<br>
<!--SELECTION LIST-->
<ul class="fruitlist">
<li id="apple">Apple</li>
<li id="banana">Banana</li>
<li id="strawberry">Strawberry</li>
<li id="orange">Orange</li>
<li id="pineapple">Pineapple</li>
<li id="blueberry">Blueberry</li>
<li id="grape">Grape</li>
<li id="lemon">Lemon</li>
<li id="kiwi">Kiwi</li>
<li id="watermelon">Watermelon</li>
<li id="peach">Peach</li>
</ul>
<!--NAME AND DESCRIPTION-->
<div class="desc">
<h3 id="fruitName">Welcome to FruityView</h3>
<p id="fruitDesc">Please pick a fruit</p>
</div>
</div>
</body>
</html>