Javascript 根本无法让JQuery UI工作_Javascript_Jquery_Jquery Ui_Jquery Ui Selectable

Javascript 根本无法让JQuery UI工作

javascript jquery jquery-ui

Javascript 根本无法让JQuery UI工作,javascript,jquery,jquery-ui,jquery-ui-selectable,Javascript,Jquery,Jquery Ui,Jquery Ui Selectable,我在让jQueryUI可选择以与我的站点一起工作时遇到了一些问题。我对编码还是很陌生，我不确定我做错了什么。我已经搜索了相关的问题，但没有找到任何能让我找到答案的我正试图创建一个基本上是荣耀的标签制造商的工作，并希望能够选择网格中的细胞使用鼠标套索。但由于某种原因，我根本无法工作以下是js： $('document').ready(function() { for (i=0; i<117;i++) { $('#plateA

我在让jQueryUI可选择以与我的站点一起工作时遇到了一些问题。我对编码还是很陌生，我不确定我做错了什么。我已经搜索了相关的问题，但没有找到任何能让我找到答案的

我正试图创建一个基本上是荣耀的标签制造商的工作，并希望能够选择网格中的细胞使用鼠标套索。但由于某种原因，我根本无法工作

以下是js：

    $('document').ready(function() {

        for (i=0; i<117;i++)    {
                $('#plateActual').append('<div class="cell"/>');
                }

                $('#plateActual').selectable();
        });

如果我的代码凌乱无序，我深表歉意。我仍在思考如何最好地保持它的条理性，并以一种可以接受的方式编写它。非常感谢你的帮助

更新：我已经做了安藤建议的改变，但是我仍然无法工作。我曾尝试将plateActual更改为ol或ul，并添加li.cell，但这也不起作用

我想知道原因是否是我的css以某种方式干扰了它，但我不确定如何在不破坏格式的情况下修复它。

append返回的元素将是执行添加的元素-在您的情况下是plateActual-因此您将cell类添加到错误的元素

当您附加单元格时（使用$），它将转换为从dom中获取类型的元素，并将它们移动到我的“plateActual”元素中，您应该在不使用$的情况下添加，因为您正在创建一个尚不存在的元素

像这样的方法应该会奏效：

append返回的元素将是执行add的元素（在您的例子中是plateActual），因此您将把cell类添加到错误的元素中

像这样的方法应该会奏效：

谢谢。这似乎是创建div的更明智的方法。不幸的是，我仍然无法工作，在这方面我没有取得任何进展。到底是什么不起作用？你调试过了吗？可能您有错误-请参阅firebug或内置的chrome/opera调试器。非常感谢。这似乎是创建div的更明智的方法。不幸的是，我仍然无法工作，在这方面我没有取得任何进展。到底是什么不起作用？你调试过了吗？可能您有错误-请参阅firebug或内置的chrome/opera调试器。

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

 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;

}

for (var i=0; i<5;i++)    {                          
          $('#plateActual').append('<div class="cell"/>');                                           
}