javascript - JQuery 在使用先前的 .replaceWith() 创建的 html 元素上使用 .replaceWith()

Question

我正在制作一个包含大量空白 div 标签的简单网页

<div></div>

在我的 css 中，我将 div 设置为 100px x 100px 的正方形，并带有背景色。

我正在使用 jQuery 让鼠标通过改变颜色与 div 进行交互，当单击时，div 在原始正方形的空间内分解为四个较小的正方形。较小的方 block 是使用 .replaceWith() 调用创建的。这一切都很好。

我的问题是，如果我单击其中一个较小的方 block ，我希望它 .replaceWith() 在它的位置再替换四个较小的方 block ，但它什么也没做。

这是我的 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 有一个宽度和高度设置为 50% 的 .small{}，所以根据定义，我相信它应该可以工作。

Answer 1

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

我建议只在最里面的 <div> 上启用鼠标悬停事件元素并改用追加:

// 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