Question

所以我试图通过在JS中创建我的大部分代码来更好地练习JS和Jquery。我试图搜索并实施这种方法，但空手而归。我将附加原始HTML，然后我在Jquery中尝试它：

HTML

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

Jquery的

var main = function() {
    $(document).ready(function () {

       var $checkBoxes = $('<div>',{class: "checkBoxes"});
       var $recipePicContainer = $('<span>', {class: "recipePicContainer"});
       var $img = document.getElementById("recipe");
       var $div = $('<div></div>');
        $('.mainContainer').append($checkBoxes);
            $($checkBoxes).append($recipePicContainer);
                $($recipePicContainer).append($img);
                $($recipePicContainer).append($div).append('Cocktail');
        $('.recipePicContainer').click(function () {
            $(this).next('.recipes').toggle("slow").toggleClass('selected');

        });
    });
};
$(document).ready(main);

谢谢！

Answer 1

您可以使用解决方案https://jsfiddle.net/xg5r72xt/

  $(document).ready(function () {

     var $checkBoxes = $('<div>',{class: "checkBoxes"});
     var $recipePicContainer = $('<span>', {class: "recipePicContainer"});
     var $img = document.getElementsByClassName("recipe");
     console.log($img);
     var $div = $('<div></div>');
      $('.mainContainer').append($checkBoxes);
          $($checkBoxes).append($recipePicContainer);
              $($recipePicContainer).append($img);
              $($recipePicContainer).append($div).append('Cocktail');
      $('.recipePicContainer').click(function () {
          $(this).next('.recipes').toggle("slow").toggleClass('selected');

      });
  });

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

代码问题

var $ img = document.getElementById（“recipe”）;

更改了代码说明 ID配方的元素不存在，而是使用图片标记中的“配方”。

我认为这是问题之一。

将HTML元素转换为Jquery但无法看到它们

1 个答案: