Javascript 创建一个复选框，键入li，然后将整个内容循环3次_Javascript_Jquery_Checkbox_Createelement

Javascript 创建一个复选框，键入li，然后将整个内容循环3次

javascript jquery checkbox

Javascript 创建一个复选框，键入li，然后将整个内容循环3次,javascript,jquery,checkbox,createelement,Javascript,Jquery,Checkbox,Createelement,所以我试着做三件事： 1-为类成分的li创建复选框。 2-删除在li calss指令之后添加的讨厌的li。 3-将整个过程循环3次，这样我将有3个容器，其中包含不同的图像作为recipe类 HTML 晚宴 JS var main=函数（）{ var$checkbox=document.createElement（'div'）； $checkbox.setAttribute（“类”、“复选框”）； var$recipePicContainer=document.createElement（'s

所以我试着做三件事： 1-为类成分的li创建复选框。 2-删除在li calss指令之后添加的讨厌的li。 3-将整个过程循环3次，这样我将有3个容器，其中包含不同的图像作为recipe类

HTML


晚宴

var main=函数（）{
var$checkbox=document.createElement（'div'）；
$checkbox.setAttribute（“类”、“复选框”）；
var$recipePicContainer=document.createElement（'span'）；
$recipePicContainer.setAttribute（“类”、“recipePicContainer”）；
函数makeRecipePic（）{
var recipe=document.createElement（“IMG”）；
recipe.setAttribute（“src”和“./images/grasshopper comble.jpg”）；
setAttribute（“类”、“配方”）；
$recipePicContainer.appendChild（配方）；
}
makeRecipePic（）；
var mainContainer=document.getElementsByClassName（'mainContainer'）；
mainContainer[0]。appendChild（$checkbox）；
var$div=document.createElement（'div'）；
$div.innerHTML=‘鸡尾酒’；
$recipePicContainer.appendChild（$div）；
$checkBoxes.appendChild（$recipePicContainer）；
var$recipes=document.createElement（“ul”）；
var$checkbox=document.getElementsByClassName（'checkbox'）；
//var x=document.createElement（“输入”）；
//x、 setAttribute（“类型”、“复选框”）；
对于（var i=1；i第二步：li.appendChild（b）；将除去额外的讨厌的li
在第一步中：你想要带有li选项的复选框吗？你能在一些在线工具上设置它吗？比如第二步的Thanx。哦，这是我的提琴……出于某种原因，它什么也不运行，只需点击外部资源并包含jQuery cdn链接
<!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>

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);