創建一個複選框類型li，然後循環整個事情3次

所以我想做3件事： 1-創建類是成分的li的複選框。 - 刪除那些在流入後添加的討厭的li。 3-循環這整個事情3次，所以我會有3容器的配方只是與配方類不同的圖像。創建一個複選框類型li，然後循環整個事情3次

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>

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

來源

2017-07-19 Dan Eker

https://jsfiddle.net/DanDaManEker/z9bz4c27/3/ –

第二步驟：li.appendChild（B）;將擺脫多餘的討厭的李。

第一步：你想要li選項的checkBoxes嗎？你可以設置一些在線工具，如https://jsfiddle.net/

來源

2017-07-19 10:53:42 LogicBlower

Thanx爲第二步。哦，這裏是我的小提琴...由於某種原因，它什麼都不運行https://jsfiddle.net/DanDaManEker/z9bz4c27/3/ –

點擊外部資源，幷包括jQuery cdn鏈接 https://jsfiddle.net/z9bz4c27/ 7 / – LogicBlower

創建一個複選框類型li，然後循環整個事情3次

回答

相關問題