单击按钮时覆盖 JavaScript 方法

Question

我试图让这个网格在按下按钮时重新加载，并根据用户输入调整大小。这是我想出的，但是在按下按钮并回答提示后我无法加载网格。我在这里错过了什么？难道我做错了什么？另外，如果我希望网格保持完全相同的尺寸并且只在提示后更改网格内的正方形数量怎么办？我该怎么做？

 <html><body></body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="jquery.js"></script></html>

$(document).ready(function () {

    $('body').prepend('<div class="container"></div>')

        for (var i = 1; i < 17; i++) {
        $('.container').append('<div class="row"></div>')
    }

    for (var i = 1; i < 17; i++) {
        $('.row').append('<p>&nbsp;</p>');
    }

    $('.container').before('<div class="button" style="text-align:center"><p>This Is My Test Button</p></div>')

    $('.button').on('click', function () {
        var userAnswer1 = prompt("How wide would you like the grid?");
        if (userAnswer1 > 50) {
            confirm("Sorry, you can't make a grid wider than 50.");
        } else {
            var userAnswer2 = prompt("How tall would you like the grid?");
            if (userAnswer2 > 50) {
                confirm("Sorry, you can't make a grid taller than 50.");
            } else {
                $('.row').remove();
                for (var i = 1; i < userAnswer1; i++) {
                    $('.container').append('<div class="row"></div>')
                }
                for (var i = 1; i < userAnswer2; i++) {
                    $('.row').append('<p>&nbsp;</p>');
                }
            }
        }
    });

    $('.row').css({
        margin: '0',
        padding: '0',
    });

    $('.row p').css({
        display: 'inline-block',
        margin: '0',
        padding: '0',
        background: 'white',
        border: '1px black solid',
        height: '25px',
        width: '25px',
    }).mouseenter(function () {
        $(this).css('background-color', 'black')
    });

    $('.button p').css({
        width: '436px',
        height: '25px',
        border: '1px solid #18ab29',
    }).mouseenter(function () {
        $(this).css('background-color', 'gray')
            .mouseleave(function () {
            $(this).css('background-color', 'white')
        });
    });

});

Answer 1

我认为您的脚本中有很多地方引起了问题，但您遇到的主要问题似乎是您应用 css 的方式。如果你摆脱 $('.row').css({.... 和 $('.row p').css({... 块并使用样式块代替，一切都应该有效。

<style>
  .row {
    margin: 0;
    padding: 0;
  }
  .row p {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: white;
    border: 1px black solid;
    height: 25px;
    width: 25px;
  }

  .row:hover {
    background: #000;
  }
</style>

当您通过 $.css() 应用样式时，它们仅适用于您的 jQuery 对象中的元素。这意味着当您删除元素并添加新元素时，您将不得不使用 $.css() 函数重新应用这些样式。有时这很有用，但一般来说，最好为 CSS 使用样式表或至少使用样式块。这样您就可以 add/remove 随心所欲地使用元素，并且仍然会应用样式，而无需您做任何额外的工作。

单击按钮时覆盖 JavaScript 方法

Over Riding JavaScript Method when a Button is Clicked

javascript

overriding