Не удается получить интерфейс JQuery, который можно выбрать для работы вообще
У меня возникли проблемы с выбором интерфейса JQuery для работы с моим сайтом. Я все еще очень плохо знаком с кодированием и не уверен, что делаю неправильно. Я искал соответствующие вопросы и не смог найти ни одного, который позволил бы мне разобраться.
Я пытаюсь создать то, что по сути является прославленным создателем ярлыков для работы, и хотел бы иметь возможность выбирать ячейки в сетке с помощью мыши "лассо". Но по какой-то причине я не могу выбрать работу вообще.
Вот JS:
$('document').ready(function() {
for (i=0; i<117;i++) {
$('#plateActual').append('<div class="cell"/>');
}
$('#plateActual').selectable();
});
Вот HTML-код:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navbar">
</div>
<div id="controlPanel">
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
</div>
<div id="plateEditor">
<div id="plateActual">
</div>
</div>
<div id="bottom">
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</body>
Вот CSS:
body {
margin: 0px auto;
padding: 0;
}
p {
color: yellow;
}
#wrapper {
border: 1px dotted black;
width: 980px;
margin: 0px auto;
padding: 0;
}
#navbar {
width: 980px;
background: black;
height: 50px;
position: fixed;
margin: 0;
padding: 0;
top: -10px;
}
#controlPanel {
width: 250px;
background-color: red;
float:left;
top: 100px;
margin-bottom: 0;
}
#plateEditor {
position: relative;
overflow: auto;
width: 730px;
float:right;
top: 100px;
margin-bottom: 0;
margin-top: 150px;
}
#plateActual {
border: 1px solid;
width: 403px;
height: 279px;
margin: 0px auto;
pading: 0;
}
#bottom {
width: 980px;
height: 30px;
background:green;
clear: both;
bottom: 0;
margin: 0px auto;
padding: 0;
}
.cell {
float: left;
width: 29px;
height: 29px;
border: 1px dotted;
}
Я извиняюсь, если мой код грязный и неорганизованный. Я все еще выясняю, как лучше держать это организованным и вообще написать это приемлемым способом. Большое спасибо за вашу помощь.
Обновление: я внес изменения, предложенные Андо, но я все еще не могу выбрать для работы. Я попытался изменить #plateActual на ol или ul и добавить вместо него li.cell, но это тоже не сработало.
Мне было интересно, если причина в том, что мой css каким-то образом мешает ему, но я не уверен, как это исправить, не разрушив форматирование.
1 ответ
Элемент, возвращаемый append, будет элементом, к которому выполняется добавление - в вашем случае plateActual- так вы будете добавлять cell класс не к тому элементу.
Когда вы добавляете клетки - вы используете $('<div/>') - который будет переводить как "получить элементы типа '<div/>' от dom и переместите их внутрь моего элемента "plateActual" - вы должны добавить без $, когда создаете элемент, который еще не существует.
Примерно так должно работать ( http://jsfiddle.net/k3YJY/):
for (var i=0; i<5;i++) {
$('#plateActual').append('<div class="cell"/>');
}