创建一个复选框类型 li 然后循环整个事情 3 次
Create a checkbox type li and then for looping the whole thing 3 times
所以我想做三件事:
1- 为 class 成分的 li 创建复选框。
2-删除在 li 类指令之后添加的讨厌的 li。
3- 将整个过程循环 3 次,这样我就有了 3 个食谱容器,只是食谱的图像不同 class。
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link rel="stylesheet" href="../../resources/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../resources/css/flexboxgrid-6.3.1/css/flexboxgrid.min.css">
<link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
<script type="text/javascript" src="../../resources/libs/jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../../resources/script/main.js"></script>
<script type="text/javascript" src="../../resources/libs/bootstrap-3.3.6-dist/js/bootstrap.js"></script>
<!--<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDoYZy2GGamOODtfAgNr3Q0q_LZAYzfBRk&callback=initMap"></script>-->
<!--<script type="text/javascript" src="../../resources/script/googleMaps.js"></script>-->
<title>Dinner Party</title>
</head>
<body>
<div class="mainContainer col-md-12 col-xs-12">
</div>
</body>
</html>
JS
var main = function () {
var $checkBoxes = document.createElement('div');
$checkBoxes.setAttribute("class", "checkBoxes");
var $recipePicContainer = document.createElement('span');
$recipePicContainer.setAttribute("class", "recipePicContainer");
function makeRecipePic(){
var recipe = document.createElement("IMG");
recipe.setAttribute("src", "../images/grasshopper-cocktail.jpg");
recipe.setAttribute("class", "recipe");
$recipePicContainer.appendChild(recipe);
}
makeRecipePic();
var mainContainer = document.getElementsByClassName('mainContainer');
mainContainer[0].appendChild($checkBoxes);
var $div = document.createElement('div');
$div.innerHTML = 'CockTails';
$recipePicContainer.appendChild($div);
$checkBoxes.appendChild($recipePicContainer);
var $recipes = document.createElement("ul");
var $checkboxes = document.getElementsByClassName('checkBoxes');
//var x = document.createElement("INPUT");
//x.setAttribute("type", "checkbox");
for (var i = 1; i <= 6; i++) {
var li = document.createElement("li","INPUT");
li.className = "ingredients";
li.setAttribute("type", "checkbox");
var a = document.createElement("a");
a.innerHTML = "Ingredient " + i;
li.appendChild(a);
$recipes.appendChild(li);
}
var b = document.createElement("li");
li.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
li.className = "Instructions";
li.appendChild(b);
$checkboxes[0].appendChild($recipes);
$('.recipes').hide();
$('.mainContainer .recipePicContainer').click(function () {
$(this).next('ul').toggle("slow").toggleClass('selected');
});
};
$(document).ready(main);
第二步:li.appendChild(b); 将摆脱多余的讨厌的 li 。
并且在第一步中:您想要带有 li 选项的复选框吗?你能在https://jsfiddle.net/
之类的在线工具上设置它吗
所以我想做三件事: 1- 为 class 成分的 li 创建复选框。 2-删除在 li 类指令之后添加的讨厌的 li。 3- 将整个过程循环 3 次,这样我就有了 3 个食谱容器,只是食谱的图像不同 class。
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link rel="stylesheet" href="../../resources/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../resources/css/flexboxgrid-6.3.1/css/flexboxgrid.min.css">
<link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
<script type="text/javascript" src="../../resources/libs/jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../../resources/script/main.js"></script>
<script type="text/javascript" src="../../resources/libs/bootstrap-3.3.6-dist/js/bootstrap.js"></script>
<!--<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDoYZy2GGamOODtfAgNr3Q0q_LZAYzfBRk&callback=initMap"></script>-->
<!--<script type="text/javascript" src="../../resources/script/googleMaps.js"></script>-->
<title>Dinner Party</title>
</head>
<body>
<div class="mainContainer col-md-12 col-xs-12">
</div>
</body>
</html>
JS
var main = function () {
var $checkBoxes = document.createElement('div');
$checkBoxes.setAttribute("class", "checkBoxes");
var $recipePicContainer = document.createElement('span');
$recipePicContainer.setAttribute("class", "recipePicContainer");
function makeRecipePic(){
var recipe = document.createElement("IMG");
recipe.setAttribute("src", "../images/grasshopper-cocktail.jpg");
recipe.setAttribute("class", "recipe");
$recipePicContainer.appendChild(recipe);
}
makeRecipePic();
var mainContainer = document.getElementsByClassName('mainContainer');
mainContainer[0].appendChild($checkBoxes);
var $div = document.createElement('div');
$div.innerHTML = 'CockTails';
$recipePicContainer.appendChild($div);
$checkBoxes.appendChild($recipePicContainer);
var $recipes = document.createElement("ul");
var $checkboxes = document.getElementsByClassName('checkBoxes');
//var x = document.createElement("INPUT");
//x.setAttribute("type", "checkbox");
for (var i = 1; i <= 6; i++) {
var li = document.createElement("li","INPUT");
li.className = "ingredients";
li.setAttribute("type", "checkbox");
var a = document.createElement("a");
a.innerHTML = "Ingredient " + i;
li.appendChild(a);
$recipes.appendChild(li);
}
var b = document.createElement("li");
li.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
li.className = "Instructions";
li.appendChild(b);
$checkboxes[0].appendChild($recipes);
$('.recipes').hide();
$('.mainContainer .recipePicContainer').click(function () {
$(this).next('ul').toggle("slow").toggleClass('selected');
});
};
$(document).ready(main);
第二步:li.appendChild(b); 将摆脱多余的讨厌的 li 。
并且在第一步中:您想要带有 li 选项的复选框吗?你能在https://jsfiddle.net/
之类的在线工具上设置它吗