18
Вот что у меня есть уже:JQuery нажмите событие работает только один раз
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css" />
<script src="jquery.js"></script>
<script>
$(function() {
// Page Load
//// Set default size of canvas
var canvas_height = 124;
var canvas_width = 124;
//// Set starting point and first option point
$('#canvas div:first-child').addClass('start');
$('#canvas div:nth-child(2)').addClass('option');
GenerateIDs();
$('#btnID').click(function(){
GenerateIDs();
});
// Generates IDs dynamically
function GenerateIDs(){
var row = 0;
var col = 0;
var lastdivposition = 0;
$('#canvas div').each(function(){
if ($(this).position().top > lastdivposition)
{
row += 1;
col = 1;
}
else
col += 1;
$(this).attr('id', row + '-' + col);
lastdivposition = $(this).position().top
});
}
$('.option').click(function(){
if($(this).attr('id').split('-')[0] != $(this).next().attr('id').split('-')[0])
{
$('.option').each(function(){
$(this).removeClass('option');
});
AddDivs('c')
GenerateIDs();
$(this).removeClass('option').removeClass('blank').addClass('object');
//$(this).next().addClass('option');
$('.object').each(function(){
if($('#' + $(this).attr('id').split('-')[0] + '-' + (parseInt($(this).attr('id').split('-')[1]) + 1)).hasClass('blank'))
$('#' + $(this).attr('id').split('-')[0] + '-' + (parseInt($(this).attr('id').split('-')[1]) + 1)).removeClass('blank').addClass('option');
if($('#' + (parseInt($(this).attr('id').split('-')[0]) + 1) + '-' + $(this).attr('id').split('-')[1]).hasClass('blank'))
$('#' + (parseInt($(this).attr('id').split('-')[0]) + 1) + '-' + $(this).attr('id').split('-')[1]).removeClass('blank').addClass('option');
});
}
});
// Adds row if type = r, column if type = c
function AddDivs(type){
if(type == 'r')
{
canvas_height += 62;
$('#canvas').children('div').each(function(){
if($(this).position().top == $('#canvas div:first-child').position().top)
$('#canvas').append('<div class="blank"></div>');
});
$('#canvas').css('height', canvas_height + 'px');
}
if(type == 'c')
{
canvas_width += 62;
$('#canvas').children('div').each(function(){
if($(this).position().left == $('#canvas div:first-child').position().left)
$('#canvas').append('<div class="blank"></div>');
});
$('#canvas').css('width', canvas_width + 'px');
}
}
});
</script>
<style>
#canvas, #toolbox {float:left; height:124px; margin:25px; padding:5px; width:124px;}
.blank {background-color:gray;}
.start {background-color:green;}
.object {background-color:blue;}
.option {background-color:yellow;}
body div {border:1px solid black;}
body div div {float:left; height:50px; margin:5px; width:50px;}
</style>
</head>
<body>
<div id="toolbox">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="canvas">
<div class="start"></div>
<div class="option"></div>
<div class="blank"></div>
<div class="blank"></div>
</div>
<br /><br />
<div style="background-color:#AAAAAA; clear:left;">
<input id="btnID" type="button" value="Generate IDs" />
<input id="btnAddRow" type="button" value="Add Row" />
<input id="btnAddCol" type="button" value="Add Col" />
- LEGEND:
<span style="color:green; font-size:20px; font-weight:bold;">START</span>
<span style="color:yellow; font-size:20px; font-weight:bold;">OPTION</span>
<span style="color:blue; font-size:20px; font-weight:bold;">OBJECT</span>
</div>
</body>
</html>
(а вот jsFiddle его в эксплуатацию; http://jsfiddle.net/DUCY3/1/)
В основном в долгосрочной перспективе он должен продолжать добавлять столбцы/строки, когда вы нажимаете желтый. Но во второй раз это даже не воспринимается событие click. Не знаю, почему. Благодарю.
В будущем, пожалуйста, не * просто * включить ссылку на jsFiddle. Ваше сообщение должно быть автономным от любого другого ресурса; подумайте, что произошло бы, если бы jsFiddle спустился в будущем. – Matt