Question

我为编程项目创建了一个Etch A Sketch。默认按钮会添加行，但屏幕上不显示任何内容，但开发工具会将行显示为正在创建。我还试过改变边距，填充等等。此外，按钮的第二组事件永远不会被正确触发，它只会将所有行突出显示为黑色而不是允许我在将鼠标悬停在它们上方时更改它们。 https://lettda.github.io/EtchAsketch/

更新：显示已解决（＆＃39;。＆＃39;在删除html的newRow前面），修复悬停事件是唯一的问题

$(document).ready(function () {

      var i;

  function gridCreate (){
      $('.grid').empty();

      var userNum = prompt("How big do you want your grid?");

      for (var i = 0; i < userNum; i++) { 
          $('.grid').append("<div class = 'newRow'></div>");
      }
      for (var i = 0; i < userNum; i++) {
          $('.newRow').append("<div class='square'></div>");
      }

      var newWidth = $('.square').width() * i;
      $('.newRow').width(newWidth);
      $('.grid').width($('.newRow').width());

      var newHeight = $('.square').height() * i;
      // $('.newRow').height(newHeight);
      $('.grid').height($('.newRow').height());
  };


   $('.normal').on("click", function(){
          gridCreate();
      // $('.square').unbind();
  $('.square').on("hover", function(){
      $(this).css('background-color', 'red');
      });
   });
});

CSS：

.grid {
    margin: 50px auto 0 auto;
    border: 1px solid black;
}
.newRow {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.square {
    height: 1.5rem;
    width: 1.5rem;
    background-color: black;
    display: inline-block;
    margin: 0px;
}
.navbar-brand {
    text-align: center;
    float: none !important;
}
.navButtons {
    margin: 0 auto;
    text-align: center;
}

Answer 1

所以这里有一些问题。

ClassNames不能以＆＃39;开头。＆＃39; （See W3 CSS Grammar Rules）。设置class='myClassName'没有任何点，只用一个＆＃39;执行jQuery查找。＆＃39;。
CSS中没有边距，因此squares似乎是一行。请参阅下面的潜在CSS解决方案。
在这种情况下，将i乘以生成维度并不会破坏任何内容，但代码不应该依赖于JS中的古怪问题，我建议更明确并参考已在范围中定义的userNum变量。
侦听器事件只能在之前附加到DOM之后才会添加到DOM元素中，因此侦听器永远不会触发。您需要在添加squares后添加侦听器。
hover不是真实的事件类型。您想要使用jQuery＆＃39; .hover()

这里有一些替代JS我建议。

$(document).ready(function () {
  function gridCreate (){
    $('.grid').empty();

    var userNum = prompt("How big do you want your gid?");

    for (var i = 0; i < userNum; i++) { 
      $('.grid').append("<div class ='newRow'></div>");
    }
    for (var i = 0; i < userNum; i++) {
      $('.newRow').append("<div class='square'></div>");
    }

    var newWidth = ($('.square').width()+10) * userNum;
    $('.newRow').width(newWidth);
    $('.grid').width($('.newRow').width());

    var newHeight = $('.square').height() * userNum;
    $('.grid').height($('.newRow').height());

    $('.square').hover(function(){
      $(this).css('background-color', 'red');
    });
  };
  $('.normal').on("click", function(){
      gridCreate();
  });
});

要解决square间距问题，您还需要为它们添加一些边距，以便它们看起来不像一个长黑条。

.square { margin:0 5px;}

这里是working JSFiddle demo。

创建了jquery行，但没有任何显示，也没有on（＆＃39; hover＆＃39;）方法有效

1 个答案: