Question

我正在处理一个有大量空白div标签的简单网页

<div></div>

在我的CSS中，我将div设置为100px×100px的正方形，背景色。

我使用jQuery让鼠标通过改变颜色与div交互，当点击时，div在原始正方形的空间内分解成四个较小的正方形。使用.replaceWith（）调用创建较小的正方形。这一切都很有效。

我的问题是，如果我点击其中一个较小的方块，我希望它在.replaceWith（）中有四个更小的方块，但它没有做任何事情。

这是我的jQuery

$(document).ready(function(){

$(document).on('mouseover', 'div', function(){
    $(this).css("background-color", "#4499FF");

    $(this).mouseleave(function(){
        $(this).css("background-color", "#2277AA");
    });

});

$(document).on('click', 'div', function(){
    $(this).replaceWith('<div><div class="small"></div><div class="small"></div><div class="small"></div><div class="small"></div></div>');
});
$(document).on('click', '.small', function(){
    $(this).replaceWith('<div><div class="small"></div><div class="small"></div><div class="small"></div><div class="small"></div></div>');
});

});

我的css有一个.small {}，宽度和高度设置为50％，所以根据定义，我认为它应该有效。

Answer 1

我认为你不需要.replaceWith。你可以简单地使用.append。此外，由于.small是<div>，它将触发两个文档点击处理程序，这似乎不是预期的行为。此外，通过在mouseover事件中绑定mouseleave事件，您将为每个div绑定多次。

我建议仅在最里面的<div>元素上启用鼠标悬停事件，并使用append代替：

// Split into 2 events
// Use :not(:has(div)) to ensure that the div has no children
$(document).on('mouseover', 'div:not(:has(div))', function () {
    $(this).css("background-color", "#4499FF");
});
$(document).on('mouseleave', 'div:not(:has(div))', function () {
    $(this).css("background-color", "#2277AA");
});

$(document).on('click', 'div', function (e) {
    // Only append the elements to the target element clicked
    // This prevents unwanted behavior when clicking a div inside a div.
    if (e.target == this) {
        $(this).append('<div class="small"></div><div class="small"></div><div class="small"></div><div class="small"></div>');
    }
});

<强> Example Fiddle

JQuery在使用以前的.replaceWith（）创建的html元素上使用.replaceWith（）

1 个答案: