javascript - 无法通过单击将 css 属性添加到 <td> 元素

<分区>

我正在尝试为元素构建像素标记网页。它快完成了。我面临着几个问题:

无法填充颜色，当一个<td>标签被点击。
wells包含颜色选项和网格输入值的，在我调整浏览器大小时溢出垂直线。我在这里需要宽度标签，因为我希望它填充它所在的列大小的 100%。我必须在这里使用硬编码值，因为如果我使用 100% 作为宽度值，井将填充整个宽度调整浏览器大小时的窗口。

请引用此处的输出: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>

最佳答案

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

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

我已在以下示例中更正了此问题:

$(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'); } }); });

.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">  <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>  BLUE <br> <input type="radio" name="color" value="yellow" id="yellow"><i class="fa fa-fire-extinguisher fa2"></i>  YELLOW <br> <input type="radio" name="color" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i>  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>

关于javascript - 无法通过单击将 css 属性添加到 <td> 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49351914/

上一篇：javascript - 错误 TS2339 : Property 'Default' does not exist on type 'string' . **

下一篇：css - Wordpress:网格布局 - 框 slider

相关文章：

javascript - HTML 表格中的嵌套 for 循环

html - 消除砖石式 float 布局中的死 Angular

javascript - React js组件不监听Jquery插件

从浏览器快捷方式提交表单的 Javascript 函数

c# - 如何通过传递参数使用java脚本/Jquery调用C#(aspx.cs)函数

javascript - 打印页面上的特定元素？

jquery - 子菜单链接不适用于多级 jQuery 菜单

javascript - jQuery - 从字符串数组中删除重复项

html - 如何使用前/后元素切片背景颜色

javascript - 如何在 Facebook Canvas 框架内捕获滚动事件？

©2024 IT工具网联系我们