无法通过单击将css属性添加到元素

时间：2018-03-18 19:19:47

标签： javascript jquery html css

我正在尝试为项目构建像素标记网页。它差不多完成了。我面临一些问题：

  1. 点击<td>标记时无法填写颜色。

  2. 包含颜色选项和网格输入值的wells，当我调整浏览器大小时，覆盖垂直线。我需要宽度标签，因为我希望它填充它所在的列大小的100％。我必须在这里使用硬编码值，因为如果我使用100％作为宽度值，则井填充整个宽度浏览器调整大小时的窗口。

    3. 请参阅此处的输出：https://codepen.io/gauravthantry/pen/LdbxZg。

    注意： - 我刚收到通知，说这个问题与Difference between .on('click') vs .click()

    重复

    上述帖子中提出的问题是我的问题的答案。

    以下是我的代码：

    $(document).ready(function() {
    $("#grid-input").click(function() {
        $(".drawing-area").empty();

        var rows = $("#row").val();
        var cols = $("#col").val();
        if (rows > 0 && cols > 0) {
            if (rows < 8 || cols < 8) {
                for (var i = 1; i <= rows; i++) {
                    var rowClassName = 'row' + i;
                    var tr = $('<tr>').addClass(rowClassName);
                    tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

                    for (var j = 1; j <= cols; j++) {
                        var colClassName = 'col' + j;
                        $('<td width="30px" height="30px" style="border: 1px solid #000; "></a></td>').addClass(colClassName).appendTo(tr);
                    }
                    $('.drawing-area').append('</tr>');

                }
                $('.drawing-area').css('visibility', 'visible').hide().fadeIn('slow');



            } else if ((rows >= 8 && rows <= 20) && (cols >= 8 && cols <= 50)) {
                for (var i = 1; i <= rows; i++) {
                    var rowClassName = 'row' + i;
                    var tr = $('<tr>').addClass(rowClassName);
                    tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

                    for (var j = 1; j <= cols; j++) {
                        var colClassName = 'col' + j;
                        $('<td width="20px" height="20px" style="border: 1px solid #000; text-align: center;"></a></td>').addClass(colClassName).appendTo(tr);
                    }

                }
                $('.drawing-area').css('visibility', 'visible').hide().fadeIn('slow');


            } else if (rows > 20 || cols > 50) {
                alert('Bamm!!! Your input will flood the browser\'s belly');
            }
        } else {
            alert("You haven't provided the grid size!");
        }
    });
    $('td').click(function() {
        var color = $("input[name='color']:checked").val();
		concole.log(color);
        if (color === 'blue') {
            if ($(this).hasClass('colorFill-Blue'))
                $(this).removeClass('colorFill-Blue');
            else
                $(this).addClass('colorFill-Blue');

        } else if (color === 'green') {
            if ($(this).hasClass('colorFill-Green'))
                $(this).removeClass('colorFill-Green');
            else
                $(this).addClass('colorFill-Green');
            alert("green is selected");
        } else {
            if ($(this).hasClass('colorFill-Yellow'))
                $(this).removeClass('colorFill-Yellow');
            else
                $(this).addClass('colorFill-Yellow');
        }
    });
});
    .page-position{
    background-image: url("https://i.pinimg.com/originals/f8/03/50/f8035042eda4eaeac4013e4f79ed85b2.jpg");
    width:100%;
    height: 100%;
    
}

.content-position{
    background-color: rgba(255,255,255,0.6); 
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 2%;
    height: 600px;
    width: 96%;
	position: absolute;
}

.heading{
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding-top: 10px;
}

.fa1{
    color: blue;
}
.fa2{
    color: yellow;
}
.fa3{
    color: green;
}

.vertical-line{
    border-left: 1px solid white;
    height: 478px;
	margin-left: 30px;
}

.color-option-container{
    width: 300px;
    background-color: rgba(255,255,255,0.4);
	
}



.grid-size-container{
    background-color: rgba(255,255,255,0.4);
	width: 300px;
    
	
}

.text-line{
    border: none;
    border-bottom: 1px solid;
    width: 30%;
    margin-bottom: 10px;
    background: transparent;
}

.rows{
    float: left;
}

.cols{
    float: center;
    margin-left: 20px;
}

.drawing-area{
    text-align: center;
	visibility: hidden;
}

.btn-size{
	text-align: center;
width: 60px;
}

.colorFill-Blue{
	background-color: blue;
}
.colorFill-Green{
	background-color: green;
}

.colorFill-Yellow{
	background-color: yellow;
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <title>PIXEL ART MAKER</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="js/app.js"></script>
</head>

<body class="page-position">
    <!-- Content starts here -->
    <section class="content-position container-fluid">
        <section class="heading">
            <h1><i class="fa fa-fire-extinguisher fa1"></i> DRAW THE PIXELS</h1>
        </section>
        <hr>
        <section>
            <section class="row-fluid">
                <section class="col-md-3">
                    <section class="well well-lg color-option-container">
                        <form class="color-select">
                            <input type="radio" name="color" value="blue" id="blue" checked><i class="fa fa-fire-extinguisher fa1"></i>&nbsp; BLUE
                            <br>
                            <input type="radio" name="color" value="yellow" id="yellow"><i class="fa fa-fire-extinguisher fa2"></i> &nbsp;YELLOW
                            <br>
                            <input type="radio" name="color" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i> &nbsp;GREEN
                        </form>
                    </section>
                    <br>
                    <section class="well well-lg grid-size-container">

                        <input type="text" class="text-line rows" id="row" placeholder="Rows">

                        <input type="text" class="text-line cols" id="col" placeholder="Cols">
                        <br/>

                        <button type="submit" class="btn-size btn btn-block btn-primary" id="grid-input"><i class="fa fa-th-large" aria-hidden="true"></i></button>

                    </section>

                </section>
                <section class="col-md-1 vertical-line"></section>
                <section class="col-md-7">
                    <table class="drawing-area">

                    </table>
                </section>
            </section>
        </section>
    </section>

</body>

</html>

2 个答案:

答案 0 :(得分：0)

由于您的元素是动态创建的，因此您需要将click事件处理程序附加到页面加载时可用的元素，并使用 event delegation 。而不是$('td').click()，您正在寻找$('body').on("click", "td", function() {} )。

另请注意，除此之外，您的concole.log应为 console.log 。

我在以下示例中对此进行了更正：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("#grid-input").click(function() {
    $(".drawing-area").empty();

    var rows = $("#row").val();
    var cols = $("#col").val();
    if (rows > 0 && cols > 0) {
      if (rows < 8 || cols < 8) {
        for (var i = 1; i <= rows; i++) {
          var rowClassName = 'row' + i;
          var tr = $('<tr>').addClass(rowClassName);
          tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

          for (var j = 1; j <= cols; j++) {
            var colClassName = 'col' + j;
            $('<td width="30px" height="30px" style="border: 1px solid #000; "></a></td>').addClass(colClassName).appendTo(tr);
          }
          $('.drawing-area').append('</tr>');

        }
        $('.drawing-area').css('visibility', 'visible').hide().fadeIn('slow');



      } else if ((rows >= 8 && rows <= 20) && (cols >= 8 && cols <= 50)) {
        for (var i = 1; i <= rows; i++) {
          var rowClassName = 'row' + i;
          var tr = $('<tr>').addClass(rowClassName);
          tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

          for (var j = 1; j <= cols; j++) {
            var colClassName = 'col' + j;
            $('<td width="20px" height="20px" style="border: 1px solid #000; text-align: center;"></a></td>').addClass(colClassName).appendTo(tr);
          }

        }
        $('.drawing-area').css('visibility', 'visible').hide().fadeIn('slow');


      } else if (rows > 20 || cols > 50) {
        alert('Bamm!!! Your input will flood the browser\'s belly');
      }
    } else {
      alert("You haven't provided the grid size!");
    }
  });
  $('body').on("click", "td", function() {
    var color = $("input[name='color']:checked").val();
    console.log(color);
    if (color === 'blue') {
      if ($(this).hasClass('colorFill-Blue'))
        $(this).removeClass('colorFill-Blue');
      else
        $(this).addClass('colorFill-Blue');

    } else if (color === 'green') {
      if ($(this).hasClass('colorFill-Green'))
        $(this).removeClass('colorFill-Green');
      else
        $(this).addClass('colorFill-Green');
      alert("green is selected");
    } else {
      if ($(this).hasClass('colorFill-Yellow'))
        $(this).removeClass('colorFill-Yellow');
      else
        $(this).addClass('colorFill-Yellow');
    }
  });
});
＆＃13; 
.page-position {
  background-image: url("https://i.pinimg.com/originals/f8/03/50/f8035042eda4eaeac4013e4f79ed85b2.jpg");
  width: 100%;
  height: 100%;
}

.content-position {
  background-color: rgba(255, 255, 255, 0.6);
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 2%;
  height: 600px;
  width: 96%;
  position: absolute;
}

.heading {
  text-align: center;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding-top: 10px;
}

.fa1 {
  color: blue;
}

.fa2 {
  color: yellow;
}

.fa3 {
  color: green;
}

.vertical-line {
  border-left: 1px solid white;
  height: 478px;
  margin-left: 30px;
}

.color-option-container {
  width: 300px;
  background-color: rgba(255, 255, 255, 0.4);
}

.grid-size-container {
  background-color: rgba(255, 255, 255, 0.4);
  width: 300px;
}

.text-line {
  border: none;
  border-bottom: 1px solid;
  width: 30%;
  margin-bottom: 10px;
  background: transparent;
}

.rows {
  float: left;
}

.cols {
  float: center;
  margin-left: 20px;
}

.drawing-area {
  text-align: center;
  visibility: hidden;
}

.btn-size {
  text-align: center;
  width: 60px;
}

.colorFill-Blue {
  background-color: blue;
}

.colorFill-Green {
  background-color: green;
}

.colorFill-Yellow {
  background-color: yellow;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
  <title>PIXEL ART MAKER</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="js/app.js"></script>
</head>

<body class="page-position">
  <!-- Content starts here -->
  <section class="content-position container-fluid">
    <section class="heading">
      <h1><i class="fa fa-fire-extinguisher fa1"></i> DRAW THE PIXELS</h1>
    </section>
    <hr>
    <section>
      <section class="row-fluid">
        <section class="col-md-3">
          <section class="well well-lg color-option-container">
            <form class="color-select">
              <input type="radio" name="color" value="blue" id="blue" checked><i class="fa fa-fire-extinguisher fa1"></i>&nbsp; BLUE
              <br>
              <input type="radio" name="color" value="yellow" id="yellow"><i class="fa fa-fire-extinguisher fa2"></i> &nbsp;YELLOW
              <br>
              <input type="radio" name="color" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i> &nbsp;GREEN
            </form>
          </section>
          <br>
          <section class="well well-lg grid-size-container">

            <input type="text" class="text-line rows" id="row" placeholder="Rows">

            <input type="text" class="text-line cols" id="col" placeholder="Cols">
            <br/>

            <button type="submit" class="btn-size btn btn-block btn-primary" id="grid-input"><i class="fa fa-th-large" aria-hidden="true"></i></button>

          </section>

        </section>
        <section class="col-md-1 vertical-line"></section>
        <section class="col-md-7">
          <table class="drawing-area">

          </table>
        </section>
      </section>
    </section>
  </section>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

CodePen

两件事：

  1. 您的td元素是动态创建的，但您的代码使用的$("td").click(…)仅在调用时绑定到TD元素。而不是在现有TD上绑定事件，更简单和更有效的修复是将事件绑定到更静态的祖先。 table元素是静态祖先，因此将您的点击定义更改为$('table').on('click','td',function(){...})将确保包含动态TD。

    这意味着当您点击表格中的任意位置时，该函数将查看目标是否为td，如果是，它将调用包含的函数。
  2. 您在代码中遇到错误，应该console拼写为concole。

    3. 我已经解决了以下两个问题：

    ＆＃13;
    ＆＃13; 
    $(document).ready(function() {
  $("#grid-input").click(function() {
    $(".drawing-area").empty();

    var rows = $("#row").val();
    var cols = $("#col").val();
    if (rows > 0 && cols > 0) {
      if (rows < 8 || cols < 8) {
        for (var i = 1; i <= rows; i++) {
          var rowClassName = "row" + i;
          var tr = $("<tr>").addClass(rowClassName);
          tr.appendTo(".drawing-area"); //Adding dynamic class names whenever a new table row is created

          for (var j = 1; j <= cols; j++) {
            var colClassName = "col" + j;
            $(
                '<td width="30px" height="30px" style="border: 1px solid #000; "></a></td>'
              )
              .addClass(colClassName)
              .appendTo(tr);
          }
          $(".drawing-area").append("</tr>");
        }
        $(".drawing-area")
          .css("visibility", "visible")
          .hide()
          .fadeIn("slow");
      } else if (rows >= 8 && rows <= 20 && (cols >= 8 && cols <= 50)) {
        for (var i = 1; i <= rows; i++) {
          var rowClassName = "row" + i;
          var tr = $("<tr>").addClass(rowClassName);
          tr.appendTo(".drawing-area"); //Adding dynamic class names whenever a new table row is created

          for (var j = 1; j <= cols; j++) {
            var colClassName = "col" + j;
            $(
                '<td width="20px" height="20px" style="border: 1px solid #000; text-align: center;"></a></td>'
              )
              .addClass(colClassName)
              .appendTo(tr);
          }
        }
        $(".drawing-area")
          .css("visibility", "visible")
          .hide()
          .fadeIn("slow");
      } else if (rows > 20 || cols > 50) {
        alert("Bamm!!! Your input will flood the browser's belly");
      }
    } else {
      alert("You haven't provided the grid size!");
    }
  });
  $("table").on('click', 'td', function() {
    var color = $("input[name='color']:checked").val();
    console.log(color);
    if (color === "blue") {
      if ($(this).hasClass("colorFill-Blue"))
        $(this).removeClass("colorFill-Blue");
      else $(this).addClass("colorFill-Blue");
    } else if (color === "green") {
      if ($(this).hasClass("colorFill-Green"))
        $(this).removeClass("colorFill-Green");
      else $(this).addClass("colorFill-Green");
      alert("green is selected");
    } else {
      if ($(this).hasClass("colorFill-Yellow"))
        $(this).removeClass("colorFill-Yellow");
      else $(this).addClass("colorFill-Yellow");
    }
  });
});
    ＆＃13; 
    .page-position {
  background-image: url("https://i.pinimg.com/originals/f8/03/50/f8035042eda4eaeac4013e4f79ed85b2.jpg");
  width: 100%;
  height: 100%;
}

.content-position {
  background-color: rgba(255, 255, 255, 0.6);
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 2%;
  height: 600px;
  width: 96%;
  position: absolute;
}

.heading {
  text-align: center;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  padding-top: 10px;
}

.fa1 {
  color: blue;
}

.fa2 {
  color: yellow;
}

.fa3 {
  color: green;
}

.vertical-line {
  border-left: 1px solid white;
  height: 478px;
  margin-left: 30px;
}

.color-option-container {
  width: 300px;
  background-color: rgba(255, 255, 255, 0.4);
}

.grid-size-container {
  background-color: rgba(255, 255, 255, 0.4);
  width: 300px;
}

.text-line {
  border: none;
  border-bottom: 1px solid;
  width: 30%;
  margin-bottom: 10px;
  background: transparent;
}

.rows {
  float: left;
}

.cols {
  float: center;
  margin-left: 20px;
}

.drawing-area {
  text-align: center;
  visibility: hidden;
}

.btn-size {
  text-align: center;
  width: 60px;
}

.colorFill-Blue {
  background-color: blue;
}

.colorFill-Green {
  background-color: green;
}

.colorFill-Yellow {
  background-color: yellow;
}
    ＆＃13; 
    <html lang="en">

<head>
  <title>PIXEL ART MAKER</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="js/app.js"></script>
</head>

<body class="page-position">
  <!-- Content starts here -->
  <section class="content-position container-fluid">
    <section class="heading">
      <h1><i class="fa fa-fire-extinguisher fa1"></i> DRAW THE PIXELS</h1>
    </section>
    <hr>
    <section>
      <section class="row-fluid">
        <section class="col-md-3">
          <section class="well well-lg color-option-container">
            <form class="color-select">
              <input type="radio" name="color" value="blue" id="blue" checked><i class="fa fa-fire-extinguisher fa1"></i>&nbsp; BLUE
              <br>
              <input type="radio" name="color" value="yellow" id="yellow"><i class="fa fa-fire-extinguisher fa2"></i> &nbsp;YELLOW
              <br>
              <input type="radio" name="color" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i> &nbsp;GREEN
            </form>
          </section>
          <br>
          <section class="well well-lg grid-size-container">

            <input type="text" class="text-line rows" id="row" placeholder="Rows">

            <input type="text" class="text-line cols" id="col" placeholder="Cols">
            <br/>

            <button type="submit" class="btn-size btn btn-block btn-primary" id="grid-input"><i class="fa fa-th-large" aria-hidden="true"></i></button>

          </section>

        </section>
        <section class="col-md-1 vertical-line"></section>
        <section class="col-md-7">
          <table class="drawing-area">

          </table>
        </section>
      </section>
    </section>
  </section>

</body>

</html>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题