Question

所以我正在练习我的JS技能，并希望将我的HTML完全或几乎完全转换为JS。我想专注于创建这些元素并使它们发挥作用。

var main = function() {
        $(document).ready(function () {
            $('.recipePicContainer').click(function () {
                $(this).next('.recipes').toggle("slow").toggleClass('selected');
            });
        });
    };
    $(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContainer col-md-12 col-xs-12">
    
        <div class="checkBoxes">
            <span class="recipePicContainer">
                <img class="recipe" src="../images/grasshopper-cocktail.jpg" alt="Cocktail">
                <div>Cocktail</div>
            </span>
            <ul class="recipes">
               <li class="ingredient"><input type="checkbox"> ingredient 1</li>
               <li class="ingredient"><input type="checkbox"> ingredient 2</li>
               <li class="ingredient"><input type="checkbox"> ingredient 3</li>
               <li class="ingredient"><input type="checkbox"> ingredient 4</li>
               <li class="instructions">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            </ul>
        </div>
    </div>

Answer 1

好的，这里的复选框部分已经找到了：

 $('<input type="checkbox" value="1" />').prependTo(".ingredients");

仍然需要一些循环帮助。任何人吗？

将包含带有隐藏li列表的ul的div从HTM转换为JS

1 个答案: