Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

101 xxlovett0706 #24

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

101 xxlovett0706 #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b03573f
complete
xxlovett0706 Nov 19, 2015
69870f5
second add
xxlovett0706 Nov 19, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions 101-clickable-grid/101.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建cell</title>
<script src="jquery.min.js"></script>
<style>
.box{
display: flex;
width: 400px;
height: 400px;
border: 1px solid #CCC;
flex-direction: column;
}
.row{
flex: 1;
display: flex;
}
.item{
background-color: #000;
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
border: 1px solid #FFF;
}
</style>
</head>
<body>
<script>
function CreateCell(n){
this.n = n;
this.init();
}

CreateCell.prototype.init = function(){
//创建DOM元素
var box = $('<div class="box"></div>');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

考虑使用$box

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个$box指的是什么意思？

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

想起来了，我说之前为什么不对，我创建变量是var num = ....，应该创建jQuery变量 var $num = ... 这样

//插入DOM元素
$('body').prepend(box);
//循环row元素
var num = 0; //创建cell内的数字
for(var i = 1; i<= this.n; ++i){
$('.box').append('<div id="row' + i + '" class="row"></div>');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

比较好的是把整个html都拼好了，然后一次性插入dom

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

刚开始 考虑的是把整个html都拼好，但是发现格子没有插入的目标，上面的$box 是不是就是一个变量？然后把所有的内部元素先插入进去？

for(var j = 1; j<= this.n; ++j){
$('#row'+ i +'').append('<span class="item">'+ num +'</span>');
++num;
}
}
//绑定点击事件
$('span').on('click', function(e){
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这样子每个span都绑定一个事件，太多了，还是用event delegation比较好

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

事件代理是不是应该写成：$('.box').on('click', 'span', function(e){执行代码}); 这样？

console.log($(this).html());
});
};

$(function(){
var createCell = new CreateCell(40);
})
</script>
</body>
</html>
Loading