Question

我一直试图改变我的＆＃34; .square＆＃34;使用JS / JQuery创建的div。我已成功更改容器div的大小，但使用完全相同的代码对动态创建的.square div不起作用，尽管能够以其他方式应用事件.square div。我过去两天一直试图理解这个问题，并且一直在编写和重写解决方案，但我认为我目前的技能忽略了一个非常简单的答案。

目的是让.square divs＆＃39;大小取决于容器中的平方数。方块越多，.square div css就越小。

感谢任何人都能给予的帮助。

＆＃13;

    $(document).ready(function() {

      var create = function(king) {
        return $("#container").prepend("<div class='square' id=king></div>");
      }

      var sLoad = function() {
        for (i = 0; i < 16; i++) {
          $("#16").click(function() {
            $("#container").prepend("<div class='square'></div>");
          });
        };
      };
      sLoad();

      $("#clear").on("click", function() {
        $(".square").remove();
        num = prompt("How many squares would you like?");
        //		var containerSize = function(){
        //			var siz = 112 * num;
        //			$("#container").css({"height": siz+15+"px" , "width": siz+"px"});
        //		}
        //		containerSize()
        $(".square").css({
          "height": "50px",
          "width": "50px"
        });
        var make = function(num) {
          return num * num;
        };
        //var squareSize = function(){
        //	var sqr = 600 / make(num);
        //	$(".square").css({"height":sqr+"px" , "width":sqr+"px"});
        //};
        //squareSize();

        for (i = 0; i < make(num); i++) {
          $("#container").prepend("<div class='square'></div>");
        };
      });
      //	$(".button").click(function(){
      //		

      //making the square dis and reappear
      $("#container").on("mouseenter", function() {
        $(".square").mouseenter(function() {
            $(this).fadeTo("fast", 0);
          }),
          $(".square").mouseleave(function() {
            $(this).fadeTo("fast", 1);
          });
      });
    });

＆＃13;

#menuContainer {
  height: 45px;
  width: 50%;
  margin: auto;
}
#container {
  width: 600px;
  height: 600px;
  border: 1px blue dotted;
  border-radius: 2%;
  margin: auto;
  padding: 0px;
}
#controlDiv {
  height: 30px;
  width: 30px;
  border: 1px dashed red;
  margin: auto;
  margin-top: 50%;
  background-color: black;
}
.square {
  width: 100px;
  height: 100px;
  background-color: grey;
  border: 1px black dashed;
  border-radius: 3%;
  margin: 5px 5px 5px 5px;
  display: inline-block;
}
.button {
  height: 27px;
  width: 70px;
  background-color: gold;
  border: solid 1px yellow;
  text-decoration-color: blue;
  border-radius: 5%;
  text-align: center;
  padding-top: 7px;
  /*margin: auto;*/
  margin-bottom: 4px;
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <div id="menuContainer">
    <div class="button" id="16">Click</div>
    <div class="button" id="clear">Clear</div>
  </div>

  <div id="container">
    <!--	<div id="controlDiv"></div> -->
  </div>

  <!--<div class="square"></div>-->

</body>

</html>

＆＃13;

Answer 1

这个小提琴应该有效：https://jsfiddle.net/x0x9rv30/2/

您在已删除的元素上应用了CSS，您需要先创建元素，然后才能在其上应用CSS。

我刚交换了两个代码块：

<强>之前

$(".square").remove();

$(".square").css({"height":"50px" , "width": "50px"});

for (i = 0; i < make(num); i++){            
    $("#container").prepend("<div class='square'></div>");
};

<强>后

$(".square").remove();

for (i = 0; i < make(num); i++){            
    $("#container").prepend("<div class='square'></div>");
};

$(".square").css({"height":"50px" , "width": "50px"});

无法将CSS更改应用于通过JS / JQuery动态创建

1 个答案: