gpt4 book ai didi

javascript - 如何将列/行添加到 Div 网格

转载 作者:行者123 更新时间:2023-11-28 12:43:16 25 4
gpt4 key购买 nike

代码在这里:http://jsfiddle.net/jaredasch1/6dhc240q/5/

我知道我以前问过这个问题,但我无法得到有效的答案。我正在开发一款游戏,它从 4 x 4 网格开始,当您单击其中一个 div 时,它会切换上方、下方和接下来两个被点击的 div 的颜色。这部分工作得很好,当它们都是其他颜色时,它们会切换回原始颜色。然而,我现在正在尝试做的事情提出了更多的挑战。一旦它们都是第二种颜色,我想添加另一列和一行并将它们重置回原始颜色。

这是我遇到麻烦的地方。由于某种原因,不会重新创建网格。这就是你们进来的地方。我需要帮助编写一个函数或编辑我的原始脚本来实现这一点。我把这一切都放在 JSFiddle 上 here

我还将在此处发布所有代码。

    <!DOCTYPE html>
<body>
<div id="button" class="on hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
</body>

CSS

    .block {
height:100px;
width:100px;
border-radius:10px;
display:inline-block;
background-color:#33CCFF;
}
#button {
height:100px;
width:410px;
border-radius:10px;
display:inline-block;
background-color:#FF6666;
margin-bottom:10px;
}
.on {
background-color:#D633FF;
}

JavaScript/jQuery

    var main = function () {
var checkAll = function () {
var allDivs = $("div.block");
var classedDivs = $("div.block.on");

var allDivsHaveClass = (allDivs.length === classedDivs.length);

if (allDivsHaveClass) {
allDivs.removeClass("on");
}
};
$("div").mouseenter(function () {
$(this).fadeTo("slow", 0.25);
$(this).css('cursor', 'pointer');
});
$("div").mouseleave(function () {
$(this).fadeTo("slow", 1);
$(this).css('cursor', 'default');
});
$(".block").click(function () {
$(this).toggleClass("on");
$(this).prev().toggleClass("on");
$(this).nextAll().eq(4).toggleClass("on");
$(this).next().toggleClass("on");
$(this).prevAll().eq(4).toggleClass("on");
checkAll();
});
$("#button").click(function () {
$(".block").removeClass("on");
});
$(document).keydown(function (key) {
if (event.which === 32) {
$(".block").removeClass("on");
}
});
};

$(document).ready(main);

欢迎任何帮助!

最佳答案

非常简单:只需使用 .append() 添加一个新行checkAll() 逻辑中的函数当您确定用户已“完成”游戏时运行,即:

if (allDivsHaveClass) {
allDivs.removeClass("on");
$('body').append('<br /> <div class="block hover"></div> <div class="block hover"></div> <div class="block hover"></div> <div class="block hover"></div>');
}

但是,由于您现在要处理动态添加的元素,因此您将不得不使用 jQuery .on()将 mouseenter、mouseleave 和 click 事件绑定(bind)到 div.block 的方法在旅途中。您目前正在使用 .mouseenter() , .mouseleave().click()方法,这对于新添加的元素会有问题,因为它们最初在页面加载时不存在于 DOM 中。换句话说,您需要使用:

$(document).on('mouseenter', 'div', function () {
// Code here
});
$(document).on('mouseleave', 'div', function () {
// Code here
});
$(document).on('click', '.block', function () {
// Code here
});

我已经测试了你的游戏,我的解决方案有效:http://jsfiddle.net/teddyrised/6dhc240q/6/

p/s: 在开发游戏时,最好包含一个“作弊”按钮(在本例中,将所有 <div> 标记为 .on 类),这样您就不必通过整个游戏本身来检查某个新功能是否有效;)


对您的代码的其他评论:

  • 您可能想考虑更改 mouseentermouseleave进入 CSS :hover事件,因为您只是在做淡入淡出,这可以通过过渡和不透明度轻松完成
  • 更新标记,使您使用 <br />而不是 <br>
  • 实际上,不要使用 <br />根本因为它在你的情况下没有语义意义。它用于文本的换行符。相反,您可以将所有 block float 到左侧

如果您想查看稍微修改过的代码,可以在这里查看:http://jsfiddle.net/teddyrised/6dhc240q/7/

关于javascript - 如何将列/行添加到 Div 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25944066/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com